需求:一个banner,带左右按钮,底部一个小的圆形图(有几个banner的小圆圈),没有任何事件的时候,是自动滚动的;
分解流程:
- 既然是自动轮播,肯定会用到定时器,还需要一个变量去存轮播到第几个图了;
- 先写自动轮播功能,用到setInterval(),每1秒钟,i 的值也+1,相应的第几个轮播图也跟随着变化( eq(i) ),小圆圈也等同,注意 i 的值不能大于轮播图的数量,当走到最后一张图的时候(if判断),重新给 i 赋值;
- 左右按钮,对于左按钮,先暂停定时器,然后 i-- ;判断当 i 减到-1时,i 重新赋值=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)}
效果图:
![dc9385ce69ef21d73474de512bdf11ac.png](https://i-blog.csdnimg.cn/blog_migrate/79b56964f74ec850e440e63b729fb7f0.jpeg)