本文转自：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. Android中常见的内存泄漏

    为什么会产生内存泄漏? 当一个对象已经不需要再使用了,本该被回收时,而有另外一个正在使用的对象持有它的引用从而导致它不能被回收,这导致本该被回收的对象不能被回收而停留在堆内存中,这就产生了内存泄漏. ...

  2. python--输出spwm的数组

    python的功能是非常强大的,这个例子使用python编写的输出spwm数组(不对,在C语言或者其他语言叫做数组,在这里叫做list.)的程序,我们在单片机程序里调用这个程序,可以达到输出spwm波 ...

  3. 后台调js方法

    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>btnSearch( ...

  4. Cookie seesion 赋值

    后台赋值: Session["uid"] = userid;//后台 后台取值: Label1.Text = Session["userid"].ToStrin ...

  5. Owin password

    一.什么是OAuth OAuth是一个关于授权(Authorization)的开放网络标准,目前的版本是2.0版.注意是Authorization(授权),而不是Authentication(认证). ...

  6. 利用filter，巧妙地去除Array的重复元素

    var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; r ...

  7. 以证书的方式登录ssh

    常常要登录多台Linux服务器,过去在Windows下使用SecureCRT,比较省心,配置还可以放到云盘,实时同步.现在改用MAC貌似就没有那么好用的东西了,每次ssh命令登录都需要输入密码,很烦. ...

  8. 《图解HTTP》阅读笔记--第十一章针对web的攻击技术

    第十一章.针对WEB的攻击技术 ----<图解HTTP>阅读笔记攻击目标---Web简单的HTTP协议本身并不存在安全性 问题,协议本身并不会成为被攻击的对象,应用HTTP的服务器和客户端 ...

  9. P2488 [SDOI2011]工作安排 费用流

    \(\color{#0066ff}{ 题目描述 }\) 你的任务是制定出一个产品的分配方案,使得订单条件被满足,并且所有员工的愤怒值之和最小.由于我们并不想使用Special Judge,也为了使选手 ...

  10. Tensorflow方法介绍

    一.reduce系列函数(维度操作) 1.tf.reduce_sum( input_tensor, axis=None, keep_dims=False, name=None, reduction_i ...