js轮播图片小圆点变化_简单轮播图banner（新手都会懂）

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

分解流程：

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

<

>

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)}

效果图：