前戏：

XXXX年XX月XX日，经理交给我一个站点新闻资讯网页开发的活儿。我一个java程序猿，怎么完毕得了网页设计这样高端的活儿呢！

之前尽管有学过一点HTML。CSS的知识。可是在实际的使用中，把页面整的好看非常困难，最后信心没了，就再也不想去做涉及网页开发的事儿了。一心学习java。假设在小公司做java web开发，专门做后台的开发时非常少的。一般还得弄前台页面（PS:做这些前台也非常easy，要么用一些前端框架，要么就是把曾经的项目拷过来再改动下页面）。拿到网页开发这个活儿。我顿时愣了，只是好在不用我去设计页面。仅仅要把美工做好的模板拿过来再进行一下排版就OK了。仅仅写代码当然难不住作为程序猿的我啦！

于是啪啦啪啦的去写代码了。突然发现。咦。这是个什么玩意？每隔一段时间就会显示下一张新闻图片。问了下美工，他说这是一个叫“轮播”的东东，仅仅认为这个东西好奇妙，美工说你去网上找一下做轮播效果的代码，然后改改即可啦~百度了一下，发现搜索到的结果特别多，并且大部分都是用jquery写的，于是随便找到一个效果拿过去用了，效果确实令人惬意。

拿过来改下确实能解决事儿，可是我已经对无脑的复制粘贴感到厌烦了，这终究不是个办法，我不仅要知道他确实能实现这样的效果，并且也要了解它究竟是如何工作的（据我观察。公司的一些程序猿的一些代码都是复制粘贴过来的。你去看里面的一些代码就会认为非常凌乱，有时代码出问题了，你去问他，他竟然不知道！当然我这里不是为了黑大伙。只不过复制代码不会对我们技术的提升有不论什么效果）。于是依据自己的一些理解，提供了这篇jquery轮播效果的解说。假设文中有什么疏漏。还奢望不吝赐教。

正文：

首先看一下效果：

轮播效果分析：

  1. 轮播效果大致能够分为3个部分：轮播图片（图片或者是包括容器），控制轮播图显示的button（向左、向右button，索引button(比如上面效果图的顶部的数字button)），每隔一段时间轮流显示轮播图片。

  2. 轮播图的显示：要显示的轮播图显示。不须要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。
  3. 控制button：鼠标点击或者移到索引button上面时，显示相应索引位置的轮播图。向上、向下button负责控制显示上一张、下一张轮播图片。
  4. 其他：一般索引button有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自己主动轮播，鼠标离开时開始自己主动轮播。

轮播效果实现笔记：

  1. jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，比如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引button。
  2. 两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的，详细的使用參照jquery的api。
  3. CSS透明背景的实现：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （能够參看以下的參看资料），兼容大部分主流浏览器包含IE。为什么不使用opacity呢？由于opacity会使文字也透明（子元素也会透明）。
  4. HTML骨架非常重要，你写的html的结果应该是良好的。

    代码部分：



-----------------------------------------------------------------------------------

    HTML:

  1. <pre name="code" class="html"><div class="slider">
  2. 	<ul class="slider-main">
  3. 		<li class="slider-panel">
  4. 			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
  5. 		</li>
  6. 		<li class="slider-panel">
  7. 			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
  8. 		</li>
  9. 		<li class="slider-panel">
  10. 			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
  11. 		</li>
  12. 		<li class="slider-panel">
  13. 			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
  14. 		</li>
  15. 	</ul>
  16. 	<div class="slider-extra">
  17. 		<ul class="slider-nav">
  18. 			<li class="slider-item">1</li>
  19. 			<li class="slider-item">2</li>
  20. 			<li class="slider-item">3</li>
  21. 			<li class="slider-item">4</li>
  22. 		</ul>
  23. 		<div class="slider-page">
  24. 			<a class="slider-pre" href="javascript:;;"><</a>
  25. 			<a class="slider-next" href="javascript:;;">></a>
  26. 		</div>
  27. 	</div>
  28. </div>
  1.  

  CSS:

  1. * {
  2. 	padding: 0px;
  3. 	margin: 0px;
  4. }
  5. a {
  6. 	text-decoration: none;
  7. }
  8. ul {
  9. 	list-style: outside none none;
  10. }
  11. .slider, .slider-panel img, .slider-extra {
  12. 	width: 650px;
  13. 	height: 413px;
  14. }
  15. .slider {
  16. 	text-align: center;
  17. 	margin: 30px auto;
  18. 	position: relative;
  19. }
  20. .slider-panel, .slider-nav, .slider-pre, .slider-next {
  21. 	position: absolute;
  22. 	z-index: 8;
  23. }
  24. .slider-panel {
  25. 	position: absolute;
  26. }
  27. .slider-panel img {
  28. 	border: none;
  29. }
  30. .slider-extra {
  31. 	position: relative;
  32. }
  33. .slider-nav {
  34. 	margin-left: -51px;
  35. 	position: absolute;
  36. 	left: 50%;
  37. 	bottom: 4px;
  38. }
  39. .slider-nav li {
  40. 	background: #3e3e3e;
  41. 	border-radius: 50%;
  42. 	color: #fff;
  43. 	cursor: pointer;
  44. 	margin: 0 2px;
  45. 	overflow: hidden;
  46. 	text-align: center;
  47. 	display: inline-block;
  48. 	height: 18px;
  49. 	line-height: 18px;
  50. 	width: 18px;
  51. }
  52. .slider-nav .slider-item-selected {
  53. 	background: blue;
  54. }
  55. .slider-page a{
  56. 	background: rgba(0, 0, 0, 0.2);
  57. 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
  58. 	color: #fff;
  59. 	text-align: center;
  60. 	display: block;
  61. 	font-family: "simsun";
  62. 	font-size: 22px;
  63. 	width: 28px;
  64. 	height: 62px;
  65. 	line-height: 62px;
  66. 	margin-top: -31px;
  67. 	position: absolute;
  68. 	top: 50%;
  69. }
  70. .slider-page a:HOVER {
  71. 	background: rgba(0, 0, 0, 0.4);
  72. 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
  73. }
  74. .slider-next {
  75. 	left: 100%;
  76. 	margin-left: -28px;
  77. }

  JavaScript：

  1. $(document).ready(function() {
  2. 	var length,
  3. 		currentIndex = 0,
  4. 		interval,
  5. 		hasStarted = false, //是否已经開始轮播
  6. 		t = 3000; //轮播时间间隔
  7. 	length = $('.slider-panel').length;
  8.  
  9. 	//将除了第一张图片隐藏
  10. 	$('.slider-panel:not(:first)').hide();
  11. 	//将第一个slider-item设为激活状态
  12. 	$('.slider-item:first').addClass('slider-item-selected');
  13. 	//隐藏向前、向后翻button
  14. 	$('.slider-page').hide();
  15.  
  16. 	//鼠标上悬时显示向前、向后翻button,停止滑动。鼠标离开时隐藏向前、向后翻button。開始滑动
  17. 	$('.slider-panel, .slider-pre, .slider-next').hover(function() {
  18. 		stop();
  19. 		$('.slider-page').show();
  20. 	}, function() {
  21. 		$('.slider-page').hide();
  22. 		start();
  23. 	});
  24.  
  25. 	$('.slider-item').hover(function(e) {
  26. 		stop();
  27. 		var preIndex = $(".slider-item").filter(".slider-item-selected").index();
  28. 		currentIndex = $(this).index();
  29. 		play(preIndex, currentIndex);
  30. 	}, function() {
  31. 		start();
  32. 	});
  33.  
  34. 	$('.slider-pre').unbind('click');
  35. 	$('.slider-pre').bind('click', function() {
  36. 		pre();
  37. 	});
  38. 	$('.slider-next').unbind('click');
  39. 	$('.slider-next').bind('click', function() {
  40. 		next();
  41. 	});
  42.  
  43. 	/**
  44. 	 * 向前翻页
  45. 	 */
  46. 	function pre() {
  47. 		var preIndex = currentIndex;
  48. 		currentIndex = (--currentIndex + length) % length;
  49. 		play(preIndex, currentIndex);
  50. 	}
  51. 	/**
  52. 	 * 向后翻页
  53. 	 */
  54. 	function next() {
  55. 		var preIndex = currentIndex;
  56. 		currentIndex = ++currentIndex % length;
  57. 		play(preIndex, currentIndex);
  58. 	}
  59. 	/**
  60. 	 * 从preIndex页翻到currentIndex页
  61. 	 * preIndex 整数，翻页的起始页
  62. 	 * currentIndex 整数。翻到的那页
  63. 	 */
  64. 	function play(preIndex, currentIndex) {
  65. 		$('.slider-panel').eq(preIndex).fadeOut(500)
  66. 			.parent().children().eq(currentIndex).fadeIn(1000);
  67. 		$('.slider-item').removeClass('slider-item-selected');
  68. 		$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
  69. 	}
  70.  
  71. 	/**
  72. 	 * 開始轮播
  73. 	 */
  74. 	function start() {
  75. 		if(!hasStarted) {
  76. 			hasStarted = true;
  77. 			interval = setInterval(next, t);
  78. 		}
  79. 	}
  80. 	/**
  81. 	 * 停止轮播
  82. 	 */
  83. 	function stop() {
  84. 		clearInterval(interval);
  85. 		hasStarted = false;
  86. 	}
  87.  
  88. 	//開始轮播
  89. 	start();
  90. });

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，而且隐藏向前、向后button。使第一个索引button处于激活状态。

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理。 jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、

轮播控制：pre(), next(), play(), start()開始自己主动轮播，stop()停止自己主动轮播。

上面的js写的比較散，结构也不太好，读起来也比較费力。也不易使用。耦合度较高。下篇将给出一个纯粹的jquery轮播插件， 该插件能够定制各种效果。方便的配置以及可扩展。

-----------------------------------------------------------------------------------



以下是总体的代码：

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jquery轮播效果图 - by RiccioZhang</title>
  6. <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
  7. <style type="text/css">
  8. 	* {
  9. 		padding: 0px;
  10. 		margin: 0px;
  11. 	}
  12. 	a {
  13. 		text-decoration: none;
  14. 	}
  15. 	ul {
  16. 		list-style: outside none none;
  17. 	}
  18. 	.slider, .slider-panel img, .slider-extra {
  19. 		width: 650px;
  20. 		height: 413px;
  21. 	}
  22. 	.slider {
  23. 		text-align: center;
  24. 		margin: 30px auto;
  25. 		position: relative;
  26. 	}
  27. 	.slider-panel, .slider-nav, .slider-pre, .slider-next {
  28. 		position: absolute;
  29. 		z-index: 8;
  30. 	}
  31. 	.slider-panel {
  32. 		position: absolute;
  33. 	}
  34. 	.slider-panel img {
  35. 		border: none;
  36. 	}
  37. 	.slider-extra {
  38. 		position: relative;
  39. 	}
  40. 	.slider-nav {
  41. 		margin-left: -51px;
  42. 		position: absolute;
  43. 		left: 50%;
  44. 		bottom: 4px;
  45. 	}
  46. 	.slider-nav li {
  47. 		background: #3e3e3e;
  48. 		border-radius: 50%;
  49. 		color: #fff;
  50. 		cursor: pointer;
  51. 		margin: 0 2px;
  52. 		overflow: hidden;
  53. 		text-align: center;
  54. 		display: inline-block;
  55. 		height: 18px;
  56. 		line-height: 18px;
  57. 		width: 18px;
  58. 	}
  59. 	.slider-nav .slider-item-selected {
  60. 		background: blue;
  61. 	}
  62. 	.slider-page a{
  63. 		background: rgba(0, 0, 0, 0.2);
  64. 		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
  65. 		color: #fff;
  66. 		text-align: center;
  67. 		display: block;
  68. 		font-family: "simsun";
  69. 		font-size: 22px;
  70. 		width: 28px;
  71. 		height: 62px;
  72. 		line-height: 62px;
  73. 		margin-top: -31px;
  74. 		position: absolute;
  75. 		top: 50%;
  76. 	}
  77. 	.slider-page a:HOVER {
  78. 		background: rgba(0, 0, 0, 0.4);
  79. 		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
  80. 	}
  81. 	.slider-next {
  82. 		left: 100%;
  83. 		margin-left: -28px;
  84. 	}
  85. </style>
  86. <script type="text/javascript">
  87. 	$(document).ready(function() {
  88. 		var length,
  89. 			currentIndex = 0,
  90. 			interval,
  91. 			hasStarted = false, //是否已经開始轮播
  92. 			t = 3000; //轮播时间间隔
  93. 		length = $('.slider-panel').length;
  94.  
  95. 		//将除了第一张图片隐藏
  96. 		$('.slider-panel:not(:first)').hide();
  97. 		//将第一个slider-item设为激活状态
  98. 		$('.slider-item:first').addClass('slider-item-selected');
  99. 		//隐藏向前、向后翻button
  100. 		$('.slider-page').hide();
  101.  
  102. 		//鼠标上悬时显示向前、向后翻button,停止滑动，鼠标离开时隐藏向前、向后翻button。開始滑动
  103. 		$('.slider-panel, .slider-pre, .slider-next').hover(function() {
  104. 			stop();
  105. 			$('.slider-page').show();
  106. 		}, function() {
  107. 			$('.slider-page').hide();
  108. 			start();
  109. 		});
  110.  
  111. 		$('.slider-item').hover(function(e) {
  112. 			stop();
  113. 			var preIndex = $(".slider-item").filter(".slider-item-selected").index();
  114. 			currentIndex = $(this).index();
  115. 			play(preIndex, currentIndex);
  116. 		}, function() {
  117. 			start();
  118. 		});
  119.  
  120. 		$('.slider-pre').unbind('click');
  121. 		$('.slider-pre').bind('click', function() {
  122. 			pre();
  123. 		});
  124. 		$('.slider-next').unbind('click');
  125. 		$('.slider-next').bind('click', function() {
  126. 			next();
  127. 		});
  128.  
  129. 		/**
  130. 		 * 向前翻页
  131. 		 */
  132. 		function pre() {
  133. 			var preIndex = currentIndex;
  134. 			currentIndex = (--currentIndex + length) % length;
  135. 			play(preIndex, currentIndex);
  136. 		}
  137. 		/**
  138. 		 * 向后翻页
  139. 		 */
  140. 		function next() {
  141. 			var preIndex = currentIndex;
  142. 			currentIndex = ++currentIndex % length;
  143. 			play(preIndex, currentIndex);
  144. 		}
  145. 		/**
  146. 		 * 从preIndex页翻到currentIndex页
  147. 		 * preIndex 整数，翻页的起始页
  148. 		 * currentIndex 整数，翻到的那页
  149. 		 */
  150. 		function play(preIndex, currentIndex) {
  151. 			$('.slider-panel').eq(preIndex).fadeOut(500)
  152. 				.parent().children().eq(currentIndex).fadeIn(1000);
  153. 			$('.slider-item').removeClass('slider-item-selected');
  154. 			$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
  155. 		}
  156.  
  157. 		/**
  158. 		 * 開始轮播
  159. 		 */
  160. 		function start() {
  161. 			if(!hasStarted) {
  162. 				hasStarted = true;
  163. 				interval = setInterval(next, t);
  164. 			}
  165. 		}
  166. 		/**
  167. 		 * 停止轮播
  168. 		 */
  169. 		function stop() {
  170. 			clearInterval(interval);
  171. 			hasStarted = false;
  172. 		}
  173.  
  174. 		//開始轮播
  175. 		start();
  176. 	});
  177. </script>
  178. </head>
  179. <body>
  180. 	<div class="slider">
  181. 		<ul class="slider-main">
  182. 			<li class="slider-panel">
  183. 				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
  184. 			</li>
  185. 			<li class="slider-panel">
  186. 				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
  187. 			</li>
  188. 			<li class="slider-panel">
  189. 				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
  190. 			</li>
  191. 			<li class="slider-panel">
  192. 				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
  193. 			</li>
  194. 		</ul>
  195. 		<div class="slider-extra">
  196. 			<ul class="slider-nav">
  197. 				<li class="slider-item">1</li>
  198. 				<li class="slider-item">2</li>
  199. 				<li class="slider-item">3</li>
  200. 				<li class="slider-item">4</li>
  201. 			</ul>
  202. 			<div class="slider-page">
  203. 				<a class="slider-pre" href="javascript:;;"><</a>
  204. 				<a class="slider-next" href="javascript:;;">></a>
  205. 			</div>
  206. 		</div>
  207. 	</div>
  208. </body>
  209. </html>

至此一个简单的jquery轮播效果就完毕了。当然还有非常多须要改进的地方。

本篇文章的源码能够在例如以下几个地址下载：

  • CSDN下载点击这里 (http://download.csdn.net/detail/qq791967024/8993769)
  • GitHub下载点击这里(https://github.com/ricciozhang/zslider_simple)

參考资料：

  1. IE8下实现兼容rgba(透明效果)

  2. jquery官方api
  3. CSS3 opacity 属性

jQuery实现轮播效果(一) - 基础的更多相关文章

  1. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  2. 通过jQuery实现轮播效果

    HTML <div class="wrap"> <div id="slide"> <ul class="list&quo ...

  3. css jquery 实现轮播效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

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

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

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

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

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

  7. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  8. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  9. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

随机推荐

  1. 自己动手丰衣足食，为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  2. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  3. html5 读取本地文件

    尊重原创:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html HTML5为我们提供了一种与本地文件系统交互的标准方式:Fil ...

  4. SQL Server 行转列，列转行

    一.多行转成一列(并以","隔开) 表名:A 表数据: 想要的查询结果: 查询语句: SELECT name , value = ( STUFF(( SELECT ',' + va ...

  5. POJ 3630 trie树

    Phone List Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26559 Accepted: 8000 Descripti ...

  6. HTML <!DOCTYPE>标签

    一般一个基本html页面的结构,如下代码所示: <html> <head> <title>我是基本的页面结构</title> </head> ...

  7. [转载]Android平台第三方应用分享到微信开发

    一.申请APPID 微信公共平台和微博分享一样,也需要申请一个ID,来作为调起微信.分享到微信的唯一标识. 申请微信APPID可以到微信平台http://open.weixin.qq.com/app/ ...

  8. Android 关于Fragment重叠问题分析和解决

    一.问题描述 相信大家在使用Fragment的过程中,肯定碰到过Fragment重叠的问题,重启应用就好了.然而原因是什么呢? 二.原因分析 首先,Android管理Fragment有两种方式,使用a ...

  9. 《计算机图形学基础（OpenGL版）》使用院校(更新)

    从清华大学出版社责任编辑处获悉,很多高等院校选用了我们这本教材,读者反应不错! 另外,编辑提供了一份详细的使用院校名单如下: 河南科技学院 中原工学院 河北工程大学 防空兵学院 伊犁师院电信学院 吉林 ...

  10. css单双行样式

    #random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...