使用jQuery插件实现轮播图

逆战班H5太原校区学员博客
jQuery插件
jQuery功能比较有限，想要复杂的特效效果，可以接借助jquery插件完成
注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件
给大家推荐一下jQuery插件常用的网站
jQuery之家
jQuery插件库
jQuery插件使用步骤
1.引入相关文件（jQuery文件和插件文件）
2.赋值相关html、css、js(调用插件)

下面是用jQuery插件实现的轮播图

html：

<ul class="back">                     <!-- 背景图片 -->    　　
	<li class="l1"></li>    　　
	<li class="l2"></li>    　　
	<li class="l3"></li>    　　
	<li class="l4"></li>    　　
	<li class="l5"></li>   
</ul>    
<ul class="point">                    <!-- 控制按钮 -->    　　
	<li class="active"></li>    　　
	<li></li>    　　
	<li></li>    　　
	<li></li>    　　
	<li></li>    
</ul>    
<div class="btn">                  <!-- 左右控制按钮 -->    　　
	<span class="prev"></span>    　　
	<span class="next"></span>    
</div>

css：

<style>    
*{margin:0; padding: 0;}    
	ul li{list-style: none;}    
	.back{height: 400px; overflow: hidden; margin-top:100px;}    
	.back li{width: 100%; height: 400px; margin:0 auto;}    
	.back li.l1{background: red;}    
	.back li.l2{background: yellow;}    
	.back li.l3{background: blue;}    
	.back li.l4{background: black;}    
	.back li.l5{background: green;}    
	.point{text-align: center; margin-top: -30px;}    
	.point li{ width: 20px; height: 20px; border:2px solid #fff; border-radius: 10px; box-sizing:border-box; display: inline-block;}    
	.point li.active{background: #fff;}    
	.btn{ position: relative;}    
	.btn span{ display: inline-block; vertical-align: top; width: 100px; height: 100px; background: 		rgba(0,0,0,.5); position: absolute; top:-235px; cursor: pointer;}    
	.btn .prev{left: 0}    
	.btn .next{ right: 0;}  
</style>

标题

<script>       
	$(function(){    　　
		function banner(a,b,c,d,e){                                     　　　　
			index=0;    　　　　
			len=$(a).length-1;    　　　　
			function teb(index){    　　　　　　	
				$(c).eq(index).addClass(b).siblings('').removeClass(b);    　　　　　　
				$(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');    　　　　
			};    　　　　
			$(c).click(function(){    　　　　　　
				index=$(this).index();    　　　　　　
				teb(index);    　　　　
			});    　　　　
			$(d).click(function(){    　　　　　　
				index--;    　　　　　　
				if(index<0){    　　　　　　　　
					index=len;    　　　　　　
				};    　　　　　　
				teb(index);    　　　　
			});    　　　　
			$(e).click(function(){    　　　　　　
				index++;    　　　　　　
				if(index>len){    　　　　　　　　
					index=0;    　　　　　　
				};    　　　　　　
				teb(index);    　　　　
			});    　　
		};    　　
		banner('.back>li','active','.point>li','.prev','.next');    
	});  
</script>