如何用jQuery做一个简单的轮播（二）

如何用jQuery做一个简单的轮播（二）

针对（一）

中的轮播，我们采取一些改进。

1. 不仅仅局限于三张图片
2. 如何实现自动轮播
3. 如何封装函数

改进一

针对图片数量增多的问题，如何不改变代码实现轮播的问题，我们可以通过得到第几个按钮来判断移动的宽度。

var allButtons=$('#buttons>span')
for(let i=0; i<allButtons.length;i++){
   
  $(allButtons[i]).on('click',function(x){
   
    var index = $(x.currentTarget).index()
    var p=index*(-200);
    $('#images').css({
   
      transform: 'translate('+p+'px)'
    })
  })
}

改进二

实现自动轮播，我们可以设置一个计时器，没过几秒就触发click,并给时间设置id,实施某种操作时则关闭时钟。

var n=0
var size=allButtons.length
allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removeClass('red')
var timeId = setInterval(()=>{
   
  n=n+1;
  allButtons.eq(n%