jquery 轮播图

一、轮播图好几种方法下面先更新初版jquery轮播图
二、利用定位left,好比轮播图整个可视区域500，最外层div设置宽度500px,里面全部图片并列显示好比三张3*500=1500px,第一张left:0px;第二张left:-500px;第三张left:-1000px;
能够利用索引值index*500
三、得到索引值好比自动轮播的时候索引初始化0，而后自增一，当轮播到最后一个在初始化为第一张
四、关键定时器还有清除定时器
	    

*{margin: 0;padding: 0;}

.move-banner ul,.move-banner ol {list-style: none;}

.move-banner {position: relative;width: 500px;height:286px;overflow: hidden;}

.banner-list {position: relative;width: 1500px;}

.banner-list li {float: left;;}

.banner-list li img {width: 500px;}

.move-banner ol {width: 200px;position: absolute;bottom: 10px;right: 20px;}

.move-banner ol li {width: 40px;height: 40px;border-radius: 40px;background: #000;float: left;margin: 0 10px;text-align: center;color:#fff;line-height: 40px;cursor: pointer}

.move-banner ol li.active {background: red;}

#prev,#next {font-size: 40px;position: absolute;top:100px;text-decoration: none;}

#prev {left:20px;}

#next {right:40px;}

<div id="move" class="move-banner">
　　<ul id="bannerList" class="banner-list">
　　　　<li><a href=""><img src="images/o_p1.jpg"></a></li>
　　　　<li><a href=""><img src="images/o_p2.jpg"></a></li>
　　　　<li><a href=""><img src="images/o_p3.jpg"></a></li>
　　</ul>
　　<a href="javascript:;" id="prev"> << </a>
　　<a href="javascript:;" id="next"> >> </a>
　　<ol id="showCur">
　　　　<li class="active">1</li>
　　　　<li>2</li>
　　　　<li>3</li>
　　</ol>

</div>

<!-- jquery -->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script>
$(document).ready(function(){
var curIndex = 0;
var bannerleg = $("#bannerList li").length;
// 图片切换函数
function autoPlay(num){
var left=num*500;
$("#bannerList").animate({left: "-" + left + "px"},500,"swing");
$("#showCur li").eq(num).addClass("active");
$("#showCur li").eq(num).siblings().removeClass("active");

}
// 图片左右按钮点击
$("#next").click(function(){
clearInterval(timer);
//右击箭头处理
curIndex = (curIndex < bannerleg-1) ? (++curIndex):0;
autoPlay(curIndex);
})
$("#prev").click(function(){
clearInterval(timer);
//左击箭头处理
curIndex = (curIndex > 0)? (--curIndex): (bannerleg-1);
autoPlay(curIndex);

})
//自动轮播函数
function startPlay(){
timer = setInterval(function(){
if(curIndex < bannerleg-1){
curIndex++;
}else{
curIndex=0;
}
autoPlay(curIndex);
},2000);
}
//自动轮播
var timer = setInterval(function(){
if(curIndex < bannerleg-1){
curIndex++;

}else{
curIndex=0;
}

autoPlay(curIndex);

},2000);
//对右下角按钮index进行事件绑定处理等
$("#showCur").find("li").each(function(i,n){

$(this).hover(function(){
clearInterval(timer);
autoPlay(i);
curIndex = i;
},function(){
startPlay()
})
});

$("#bannerList li").hover(function(){
clearInterval(timer);

},function(){
startPlay()
})

}); </script>