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>