本文转自：http://blog.csdn.net/tsyj810883979/article/details/8986157

效果图：

实现代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>图片轮播，新闻轮播，焦点新闻轮播</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var index=0;
  10. var slideFlag = true;
  11. var length=$(".roll-news-image img").length;
  12. function showImg(i){
  13. $(".roll-news-image img")
  14. .eq(i).stop(true,true).fadeIn(800)
  15. .siblings("img").hide();
  16. $(".roll-news-index li").removeClass("roll-news-index-hover");
  17. $(".roll-news-index li").eq(i).addClass("roll-news-index-hover");
  18. $(".roll-news-title a")
  19. .eq(i).stop(true,true).fadeIn(800)
  20. .siblings("a").hide();
  21. }
  22. showImg(index);
  23. $(".roll-news-index li").click(function(){
  24. index = $(".roll-news-index li").index(this);
  25. showImg(index);
  26. slideFlag = false;
  27. });
  28. function autoSlide() {
  29. setInterval(function() {
  30. if(slideFlag) {
  31. showImg((index+1) % length);
  32. index = (index+1)%length;
  33. }
  34. slideFlag = true;
  35. }, 3000);
  36. }
  37. autoSlide();
  38. });
  39. </script>
  40. <style type="text/css">
  41. * {
  42. padding:0px;
  43. margin:0px;
  44. }
  45. .roll-news {
  46. width:480px;
  47. height:300px;
  48. border:solid 1px #c1c1c1;
  49. }
  50. .roll-news-index-hover {
  51. background-color:white;
  52. }
  53. .roll-news-image img {
  54. width:480px;
  55. height:300px;
  56. }
  57. .roll-news-index {
  58. position:relative;
  59. top:-50px;
  60. margin-right:5px;
  61. float:right;
  62. }
  63. .roll-news-index {
  64. }
  65. .roll-news-index li {
  66. list-style:none;
  67. float:left;
  68. font-size:12px;
  69. font-weight:600;
  70. width:18px;
  71. height:16px;
  72. line-height:16px;
  73. cursor:pointer;
  74. margin:0 3px;
  75. background-image:url(opacity_50.png);
  76. text-align:center;
  77. }
  78. .roll-news-title {
  79. position:relative;
  80. top:-25px;
  81. padding-left:10px;
  82. height:22px;
  83. line-height:20px;
  84. background:url(opacity_50.png);
  85. }
  86. .roll-news-title a {
  87. font-size:12px;
  88. text-decoration:none;
  89. color:#222222;
  90. }
  91. .roll-news-title a:hover {
  92. color:red;
  93. }
  94. </style>
  95. </head>
  96. <body>
  97. <div class="roll-news">
  98. <div class="roll-news-image">
  99. <img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg">
  100. <img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none">
  101. <img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none">
  102. </div>
  103. <div class="roll-news-index">
  104. <ul>
  105. <li class="roll-news-index-hover">1</li>
  106. <li>2</li>
  107. <li>3</li>
  108. </ul>
  109. </div>
  110. <div class="roll-news-title">
  111. <a href="" target="_blank">图片1：点击后跳转</a>
  112. <a href="" target="_blank" style="display:none">图片2：点击后跳转</a>
  113. <a href="" target="_blank" style="display:none">图片3：点击后跳转</a>
  114. </div>
  115. </div>
  116. </body>
  117. </html>
<!DOCTYPE html>

<html>

	<head>

		<title>图片轮播，新闻轮播，焦点新闻轮播</title>

		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

		<script type="text/javascript">

			$(document).ready(function(){

				var index=0;

				var slideFlag = true;

				var length=$(".roll-news-image img").length;

				function showImg(i){

					$(".roll-news-image img")

					.eq(i).stop(true,true).fadeIn(800)

					.siblings("img").hide();

					$(".roll-news-index li").removeClass("roll-news-index-hover");

					$(".roll-news-index li").eq(i).addClass("roll-news-index-hover");

					$(".roll-news-title a")

					.eq(i).stop(true,true).fadeIn(800)

					.siblings("a").hide();

				}

				showImg(index);

				$(".roll-news-index li").click(function(){

					index = $(".roll-news-index li").index(this);

					showImg(index);

					slideFlag = false;

				});	

				function autoSlide() {

					setInterval(function() {

						if(slideFlag) {

							showImg((index+1) % length);

							index = (index+1)%length;

						}

						slideFlag = true;

					}, 3000);

				}

				autoSlide();

			});

		</script>

		<style type="text/css">

			* {

				padding:0px;

				margin:0px;

			}

			.roll-news {

				width:480px;

				height:300px;

				border:solid 1px #c1c1c1;

			}

			.roll-news-index-hover {

				background-color:white;

			}

			.roll-news-image img {

				width:480px;

				height:300px;

			}

			.roll-news-index {

				position:relative;

				top:-50px;

				margin-right:5px;

				float:right;

			}

			.roll-news-index {

			}

			.roll-news-index li {

				list-style:none;

				float:left;

				font-size:12px;

				font-weight:600;

				width:18px;

				height:16px;

				line-height:16px;

				cursor:pointer;

				margin:0 3px;

				background-image:url(opacity_50.png);

				text-align:center;

			}

			.roll-news-title {

				position:relative;

				top:-25px;

				padding-left:10px;

				height:22px;

				line-height:20px;

				background:url(opacity_50.png);

			}

			.roll-news-title a {

				font-size:12px;

				text-decoration:none;

				color:#222222;

			}

			.roll-news-title a:hover {

				color:red;

			}

		</style>

	</head>

	<body>

		<div class="roll-news">

			<div class="roll-news-image">

				<img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg">

				<img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none">

				<img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none">

			</div>

			<div class="roll-news-index">

				<ul>

					<li class="roll-news-index-hover">1</li>

					<li>2</li>

					<li>3</li>

				</ul>

			</div>

			<div class="roll-news-title">

				<a href="" target="_blank">图片1：点击后跳转</a>

				<a href="" target="_blank" style="display:none">图片2：点击后跳转</a>

				<a href="" target="_blank" style="display:none">图片3：点击后跳转</a>

			</div>

		</div>

	</body>

</html>

附件中包含一张引用的图片，其它可以直接拷贝看效果。。

[转]jQuery实现图片轮播效果，jQuery实现焦点新闻的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  3. 使用JQuery实现图片轮播效果

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...

  4. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 用jquery实现图片轮播

    用jquery简单实现图片轮播效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  9. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

随机推荐

  1. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)

    1.ViewPager实现Tab 首先实现底部和底部布局 <?xml version="1.0" encoding="utf-8"?> <Li ...

  2. CefSharp49.0.1 SetZoomLevel

    SetZoomLevel(double zoomLevel)   -8<= zoomLevel <=9 Each zoom level increases the zoom by 20%. ...

  3. NSNumber数字

    前言 将基本数据类型包装成 OC 对象 1.NSNumber 与 基本数据类型 的相互转换 // 基本数据类型 转 NSNumber // 对象方法,将整形数据转换为 OC 对象 NSNumber * ...

  4. UIApplication直接应用

    /************ 当程序载入后执行,应用程序启动入口 *****************************/ - (BOOL)application:(UIApplication *) ...

  5. 等和的分隔子集(DP)

    晓萌希望将1到N的连续整数组成的集合划分成两个子集合,且保证每个集合的数字和是相等.例如,对于N=3,对应的集合{1,2,3}能被划分成{3} 和 {1,2}两个子集合. 这两个子集合中元素分别的和是 ...

  6. JS随机数生成算法

    ------------------------------------------ 知乎上边淘到的知识,又学到了~ http://www.zhihu.com/question/22818104 -- ...

  7. 区块链中的密码学（-）区块链中运用最广的散列算法-SHA256算法分析与实现

    在很多技术人员的眼中,区块链并不是一种新的技术,而是过去很多年计算机技术的组合运用.而在这个方方面面技术的运用上,基于密码学的加密算法可以说是区块链各种特点得以表现的根本,一旦目前使用的加密算法被证实 ...

  8. bzoj3140: [Hnoi2013]消毒（二分图）

    题目描述 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为a*b*c,a.b.c 均为正整数.为了实验的方便,它被划分为a*b*c个单位立方体区 ...

  9. 对于vue的一些理解

    首先是组件之间的通信方式 父组件到子组件的通信: props和$refs 子组件到父组件的通信: events 和 $parents 以及 $root 组件之间的通信 eventBus和vuex ev ...

  10. Color Length UVA - 1625

    题目大意: 给你两个字符串p,q,字符串中每个字符代表一个颜色,现在按顺序合并两个字符串,得到一个新字符串.新字符串的价值为,每个颜色价值的和,单个颜色价值的和等于该颜色在新字符中最后一次出现的位置减 ...