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

*{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>