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

我使用

jquery

实现了图像滑块。但它不是循环的。这意味着当前它显示

1->2->3..->8

，然后返回到

零

边距。看起来不太好。我将如何在最后一个元素

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

---

我认为比使用边距更好的方法是将第一个项目复制到最后一个位置，然后将其从原来的位置移除，这样您就拥有了无限滑块

对于较软的动画，可以在移除之前减小图像的宽度

$(function(){
    setInterval(function(){
        var first = $('.imageSlilder ul').children().first(); // item to move
        $('.imageSlilder ul').append(first.clone()); // CLONE it at the end
        first.animate( {width: 0}, 500, function() { // reduce width to 0
            first.remove(); // on completion of the animation, remove item
        });
    },2000)
});

---

在这里，您可以使用它：

在最后一个位置添加第一个图像，然后简单地将位置重置为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'
  })

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

---

请删除您的anserIt，它与您的anserIt完全相同，但具有无限滚动。。。请检查上面的链接。请参阅@just code comment..what I want..I’m正在尝试实现这一点。这是一个从@just code开始的好例子谢谢分享。我将在示例中添加此逻辑也将第一个图像复制到最后一个位置，然后如果（计数器>=len）将左边距重置为0有任何优化建议吗？@naveen我认为有些图像没有精确的大小，这就是为什么有一些像素偏移错误的原因。。