本文转自：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. C语言关键字：auto、static、register、const、volatile 、extern 总结 <转>

    auto 这个这个关键字用于声明变量的生存期为自动,即将不在任何类.结构.枚举.联合和函数中定义的变量视为全局变量,而在函数中定义的变量视为局部变量.这个关键字不怎么多写,因为所有的变量默认就是aut ...

  2. ZOJ 2301 Color the Ball (离散化+线段树)

    题意:有从 1 开始递增依次编号的很多球,开始他们都是黑色的,现在依次给出 n 个操作(ai,bi,ci),每个操作都是把编号 ai 到 bi 区间内 的-所有球涂成 ci 表示的颜色(黑 or 白) ...

  3. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  4. CF431C k-Tree dp

    Quite recently a creative student Lesha had a lecture on trees. After the lecture Lesha was inspired ...

  5. kuangbin专题十六 KMP&&扩展KMP HDU2594 Simpsons’ Hidden Talents

    Homer: Marge, I just figured out a way to discover some of the talents we weren’t aware we had. Marg ...

  6. Codeforces Round #503 (by SIS, Div. 2)B 1020B Badge （拓扑）

    题目大意:每个同学可以指定一个人,然后构成一个有向图.1-n次查询,从某个人开始并放入一个东西,然后循环,直到碰到一个人已经放过了,就输出. 思路:直接模拟就可以了,O(n^2) 但是O(n)也可以实 ...

  7. 洛谷U41492（树上启发式合并）

    提交通道 洛谷日报 考虑非\(O(n^2)\)的预处理.一遍dfs时,check某颜色有没有的数组何时清空很尴尬:得到某树答案后如果不清,则影响接下来兄弟树的搜索:如果清了,父亲节点又难以收集答案. ...

  8. 2016"百度之星" - 资格赛（Astar Round1） A

    链接:http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=690&pid=1001 我用线段树过的~可能要注意a, ...

  9. Linux 文件系统的目录结构

    http://www.jb51.net/LINUXjishu/151820.htmlLinux下的文件系统为树形结构,入口为/ 树形结构下的文件目录: 无论哪个版本的Linux系统,都有这些目录,这些 ...

  10. hdu1016 Prime Ring Problem(DFS)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...