本文转自：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. mysql--约束条件

    主键的测试  PRIMARY KEY(PRIMARY可以省略) --查看创建表的标的定义,可以查看主键 SHOW CREATE TABLE user1; ,'king');--主键不能重复 ,'kin ...

  2. c#中public，private,protected,internal的区别

    public   可以被外部成员调用  private   只能在被类的成员调用   protected   只能在被类的成员和该类的子类调用   internal   可以在当前项目调用   pub ...

  3. android 应用间共享数据，调用其他app数据资源

    在Android里面每个app都有一个唯一的linux user ID,则这样权限就被设置成该应用程序的文件只对该用户可见,只对该应用程序自身可见:而我们可以使他们对其他的应用程序可见,可以通过Sha ...

  4. Java50道经典习题-程序46 字符串连接

    题目:编写一个两个字符串连接的程序 import java.util.Scanner; public class Prog46 { public static void main(String[] a ...

  5. Android消息传递之EventBus 3.0

    Android消息传递之EventBus 3.0使用详解 http://www.cnblogs.com/whoislcj/p/5595714.html EventBus 3.0进阶:源码及其设计模式 ...

  6. c# 大文件分割 复制 Filestream 进度条

    大文件分割复制,每次复制100M 也可以复制别的较大数值. 小于1G的小文件就直接复制得了.代码里没写 ,但是很简单 直接写进去就好了,难得是分割复制 所以没写. 好吧 我还是改了 改成小文件也可以复 ...

  7. Pandas——读取csv,txt文件

    """ 读取csv文件 该文本中的分割符既有空格又有制表符(‘/t’),sep参数用‘/s+’,可以匹配任何空格. """ import p ...

  8. loj #2008. 「SCOI2015」小凸想跑步

    #2008. 「SCOI2015」小凸想跑步   题目描述 小凸晚上喜欢到操场跑步,今天他跑完两圈之后,他玩起了这样一个游戏. 操场是个凸 n nn 边形,N NN 个顶点按照逆时针从 0∼n−1 0 ...

  9. java webservices 以Axis1.4方式 调用sap webservice接口.

    1. 首先需要下载Axis1.4 jar包,这个必应搜索大把,下载下来后把jar包加入eclipse工程项目路径中即可. 2. 下载mail.jar和activation.jar 俩个包.下载地址:h ...

  10. kali2017.2之***ss安装与使用

    一.命令行安装:apt-get install python-pip    ###安装pipsudo pip install shadowsocks    ###安装ssgedit /etc/shad ...