需求：一个banner，带左右按钮，底部一个小的圆形图（有几个banner的小圆圈），没有任何事件的时候，是自动滚动的；

分解流程：

既然是自动轮播，肯定会用到定时器，还需要一个变量去存轮播到第几个图了；先写自动轮播功能，用到setInterval()，每1秒钟，i 的值也+1，相应的第几个轮播图也跟随着变化( eq(i) ),小圆圈也等同，注意 i 的值不能大于轮播图的数量，当走到最后一张图的时候（if判断），重新给 i 赋值；左右按钮，对于左按钮，先暂停定时器，然后 i-- ；判断当 i 减到-1时，i 重新赋值=4；右按钮也相似；当鼠标滑到小圆圈中时，获取所滑到小圆圈的索引，把索引赋值给 i ，再展示第 i 张banner；离开小圆圈的时候，重新启动定时器；

<div id="dlunbo"> <div id="igs"> <div class="ig"><img src="img/1.jpg" /></div> <div class="ig"><img src="img/2.jpg" /></div> <div class="ig"><img src="img/3.jpg" /></div> <div class="ig"><img src="img/4.jpg" /></div> <div class="ig"><img src="img/5.jpg" /></div> </div> <ul id="tabs"> <li class="bg"></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="btn btn1" ><</div> <div class="btn btn2">></div></div>

js中 我封装了2个函数（如有看不懂请私信我）:

var i=0;var timer;$('.ig').eq(0).show().siblings().hide(); //默认情况下 第一张图片展示，其他隐藏cursor();//自动轮播 //左按钮$('.btn1').click(function(){ clearInterval(timer); i--; if(i==-1){ i=4; } begin();})  //右按钮$('.btn2').click(function(){ clearInterval(timer); i++; console.log(i); if(i==5){ i=0; } begin();})  //小圆圈滑进滑出$('#tabs li').hover(function(){ clearInterval(timer); i=$(this).index(); begin();},function(){ cursor();}) //展示第i个function begin(){ $('.ig').eq(i).show().siblings().hide(); $('#tabs li').eq(i).addClass('bg').siblings().removeClass();} //定时器function cursor(){ timer=setInterval(function(){ i++; if(i==5){ i=0; } begin(); },1000)}

效果图：