Question

我使用jquery实现了图片滑块。但它不是循环的。它意味着目前显示1->2->3..->8然后返回zero边距。它看起来不太好。我将如何在最后一个元素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

Answer 2

我认为比使用边距更好的方法是将第一个项目的副本复制到最后一个位置，然后将其从以前的位置删除，这样你就可以拥有无限滑块。

对于较柔和的动画，您可以在删除之前缩小图像的宽度。

$(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)
});

您可以在这里工作：https://jsbin.com/malehufifu/1/edit?html,css,js,output

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

2 个答案: