javascript - 如何在jquery中循环显示图像？

Question

我使用 jquery 实现了图像 slider 。但它不是循环的。这意味着当前它显示 1->2->3..->8 然后返回零 margin 。它看起来不太好。我将如何在最后一个元素 1->2->3..->8->1->2-3 之后附加，以便它看起来不错。

这是我的代码

$(function(){
  var counter =0
  var len =$('.imageSlilder ul li').length;
    setInterval(function(){
      $('.imageSlilder ul').css('margin-left',-325*counter+'px')

    counter++;
       if(counter>=len){
                    counter =0
                }
    },2000)
})

https://jsbin.com/zizegixoha/edit?html,css,js,output

Answer 1

也将第一张图片添加到最后一个位置，然后简单地将位置重置为 0，无需转换:

 if(counter>=len+1){
      $('.imageSlilder ul').css({
        'margin-left':'0px',
        transition:'margin-left 0s'
     })
  counter=1
  }

要重新启动过渡，可以将其设置回去:

$('.imageSlilder ul').css({
   'margin-left':-325*counter+'px',
   transition:'margin-left 1s'
  })

当前方法，需要一些优化才能顺利运行:

https://jsbin.com/qaruwadiwi/1/edit?js