本文转自：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. PHP网站在Linux服务器上安全设置方案

    本文总结了PHP网站在Linux服务器上一些安全设置(ps:还有一些设置给忘了),在<lnmp一键安装包>大多数参数已经包含,如果有什么更多的设置,大家一起讨论学习 PHP安全配置 1. ...

  2. mysql--笔记1

    今日内容介绍1.MySQL数据库2.SQL语句=========================================================1 数据库概念 1.1: 什么是数据库 ...

  3. winfrom强制退出程序（Application.Exit()与Environment.Exit(0)）

    Application.Exit():通知所有消息泵必须终止,并且在处理了消息以后关闭所有应用程序窗口(先停止线程(前台线程执行完毕,后台线程自动结束),然后终止进程) Environment.Exi ...

  4. C++期中考试

    第一题1. 补足日期类实现,使得能够根据日期获取这是一年中第多少天.(12分) date.h #ifndef DATE_H #define DATE_H class Date { public: Da ...

  5. group by 两个或以上条件的分析

    首先group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素:   (1) 出现在select后面的字段 要 ...

  6. codevs1169, 51nod1084(多线程dp)

    先说下codevs1169吧, 题目链接: http://codevs.cn/problem/1169/ 题意: 中文题诶~ 思路: 多线程 dp 用 dp[i][j][k][l] 存储一个人在 (i ...

  7. Error: connection reset by peer ,during filebeat connect to elk.

    Error screenshot like below: Reason: What I found that was the machine failing had same configuratio ...

  8. Python之将字符串转换为字节的两种方法

    s = '你是谁' a = bytes(s,'utf-8') # ==> 得出的 a 的结果就是对应的字节 s.encode('utf-8') # ==> 该命令将字符串转换为字节形式

  9. HashMap的容量大小增长原理（JDK1.6/1.7/1.8）

    . 前言 HashMap的容量大小会根据其存储数据的数量多少而自动扩充,即当HashMap存储数据的数量到达一个阈值(threshold)时,再往里面增加数据,便可能会扩充HashMap的容量. 可能 ...

  10. POJ1055 BULK MAILING

    题目来源:http://poj.org/problem?id=1055 题目大意: 每封信都有一个zip-code, 由5位数字构成,可以通过将zip-code相同或相近的信件打包来节省成本.打包规则 ...