Javascript 如何无限循环项目列表？

我需要像一个垂直向上的循环一样循环li项集，每个循环之间有5000ms的延迟。我也想顺利地向上移动列表项

我的代码在开始时每5000ms触发一次循环，但它不会平稳地向上移动项目。经过几次循环迭代后，它运行得非常快

这是我正在尝试的jquery代码

function tick(){
    $('#itemflowslider ul li').animate({top:"-225px"},"slow");
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

    setInterval(function(){ tick () }, 5000);
}

//Call on page load
$(tick);

我想不出这个问题的原因是什么。请帮我渡过难关

谢谢

编辑：我做了一把小提琴，但没有想到要把它包括在我的问题中

你在问题中的编码方式会产生大量的滴答声（），这就是你注意到速度加快的原因。以这种方式编码只允许一个勾号（），因此每5秒产生一次效果

---

你在问题中的编码方式会产生大量的滴答声（），这就是你注意到速度加快的原因。以这种方式编码只允许一次勾号（），因此每5秒产生一次效果。

每次执行勾号时也会再次执行setInterval

你可以这样尝试：

function tick() {
    $('#itemflowslider ul li').animate({top:"-225px"},"slow");
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
}

$(function(){
    setInterval(tick, 5000);
});

---

每次执行勾选时也再次执行setInterval

你可以这样尝试：

function tick() {
    $('#itemflowslider ul li').animate({top:"-225px"},"slow");
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
}

$(function(){
    setInterval(tick, 5000);
});

---

你可以这样做：

$(document).ready(function(){
   setInterval(function(){
      $('#itemflowslider ul li').animate({top:"-225px"},"slow");
      $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

   },5000);
});

$(function(){
   tick();
});

function tick(){ 
   $('#itemflowslider ul li').animate({top:"-225px"}, 'slow', function(){
       $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
       setInterval(tick, 5000);
   });
}

---

你可以这样做：

$(document).ready(function(){
   setInterval(function(){
      $('#itemflowslider ul li').animate({top:"-225px"},"slow");
      $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

   },5000);
});

$(function(){
   tick();
});

function tick(){ 
   $('#itemflowslider ul li').animate({top:"-225px"}, 'slow', function(){
       $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
       setInterval(tick, 5000);
   });
}

---

你需要你的元素移动到-225px位置或者移动225px上方的每个刻度？如果是第二个，则需要

-=225px

，代码为：

function tick() {
     var $elems = $('#itemflowslider ul li');

     if ($elems.position().top < 225) {
         $elems.animate({top: 0 }, "slow");
         return;
     }

     $elems.animate({top: "-=225px"},"slow"); // slow means = 600 ms!
     $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

     setTimeout(tick, 5000); // start tick again
}

$(document).ready(function(){
    tick(); // start loop
});

---

你需要你的元素移动到-225px位置或者移动225px上方的每个刻度？如果是第二个，则需要

-=225px

，代码为：

function tick() {
     var $elems = $('#itemflowslider ul li');

     if ($elems.position().top < 225) {
         $elems.animate({top: 0 }, "slow");
         return;
     }

     $elems.animate({top: "-=225px"},"slow"); // slow means = 600 ms!
     $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

     setTimeout(tick, 5000); // start tick again
}

$(document).ready(function(){
    tick(); // start loop
});

---

可能需要计算循环时间以确保动画已完成。我的意思是这样的：

$(document).ready(function(){
   setInterval(function(){
      $('#itemflowslider ul li').animate({top:"-225px"},"slow");
      $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

   },5000);
});

$(function(){
   tick();
});

function tick(){ 
   $('#itemflowslider ul li').animate({top:"-225px"}, 'slow', function(){
       $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
       setInterval(tick, 5000);
   });
}

---

可能需要计算循环时间以确保动画已完成。我的意思是这样的：

$(document).ready(function(){
   setInterval(function(){
      $('#itemflowslider ul li').animate({top:"-225px"},"slow");
      $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");

   },5000);
});

$(function(){
   tick();
});

function tick(){ 
   $('#itemflowslider ul li').animate({top:"-225px"}, 'slow', function(){
       $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
       setInterval(tick, 5000);
   });
}

---

我在脚本中注意到的最大错误是递归使用了

setInterval

。事实上，

setInterval

反复调用传递的函数（与

setTimeout

不同），因此，每5秒，调用的数量就会呈指数增长（1、2、4…）。换句话说，每5秒

setInterval

调用

setInterval

，它也会这样做，以此类推

然后，我猜你想从原始位置减去225像素，而不是到这个位置。如果我是对的，请将

-225px

替换为

-=225px

最后，我想您更愿意等到所有动画完成后再将第一个项目移动到列表的末尾（请记住，

animate

分别应用于每个项目）

所有修复一起：

$(function tick() {
    var h = $('li:first').outerHeight(true);
    var anim = $('li').animate({ top: '-=' + h + 'px' }, 'slow');
    $.when(anim).done(function () {
        $('li:first').appendTo('ul');
        $('li').css('top', 'auto');
        setTimeout(tick, 5000);
    });
});

---

我也犯了类似的错误：。

我在脚本中注意到的最大错误是递归使用了

setInterval

。事实上，

setInterval

反复调用传递的函数（与

setTimeout

不同），因此，每5秒，调用的数量就会呈指数增长（1、2、4…）。换句话说，每5秒

setInterval

调用

setInterval

，它也会这样做，以此类推

然后，我猜你想从原始位置减去225像素，而不是到这个位置。如果我是对的，请将

-225px

替换为

-=225px

最后，我想您更愿意等到所有动画完成后再将第一个项目移动到列表的末尾（请记住，

animate

分别应用于每个项目）

所有修复一起：

$(function tick() {
    var h = $('li:first').outerHeight(true);
    var anim = $('li').animate({ top: '-=' + h + 'px' }, 'slow');
    $.when(anim).done(function () {
        $('li:first').appendTo('ul');
        $('li').css('top', 'auto');
        setTimeout(tick, 5000);
    });
});

---

---

我做了类似的事情：。

可能不是问题所在，但在您的情况下，请使用

setTimeout

。您最终会触发如此多的interval回调。或者从函数中删除

setInterval

。在页面加载时调用它一次。尝试

函数tick（）{$（'#itemflowsslider ul li'）。动画（{top:-225px'}，“slow”）；$（“#itemflowsslider ul li:first”）。追加（#itemflowsslider ul”）}//调用页面加载$（tick）；设定间隔（滴答，5000）

@PSL：非常感谢大家的支持。我从下面的两个答案中收到了这段代码，现在循环每5秒触发一次，但项目不会缓慢向上移动。你能告诉我这个问题吗？。函数tick（）{setInterval（函数（）{$（'#itemflowsslider ul li'）。动画（{top:-225px'}，“slow”）；$（“#itemflowsslider ul li:first”）。追加（“#itemflowsslider ul”）}，5000）；//在页面加载时调用$（tick）；可能不是问题所在，但在您的情况下，请使用

setTimeout

。您最终会触发如此多的interval回调。或者从函数中删除

setInterval

。在页面加载时调用它一次。尝试

函数tick（）{$（'#itemflowsslider ul li'）。动画（{top:-225px'}，“slow”）；$（“#itemflowsslider ul li:first”）。追加（#itemflowsslider ul”）}//调用页面加载$（tick）；设定间隔（滴答，5000）

@PSL：非常感谢大家的支持。我从下面的两个答案中收到了这段代码，现在循环每5秒触发一次，但项目不会缓慢向上移动。你能告诉我这个问题吗？。函数tick（）{setInterval（函数（）{$（'#itemflowsslider ul li'）。动画（{top:-225px'}，“slow”）；$（“#itemflowsslider ul li:first”）。追加（“#itemflowsslider ul”）}，5000）；//在页面加载时调用$（tick）；谢谢，我理解你的观点，现在速度不会加快。但这些项目并不会缓慢上升。这可能是什么原因？当你说他们没有缓慢地向上移动时，你的意思是“慢”参数。动画没有你喜欢的慢吗？如果是这种情况，请尝试添加自定义时间间隔，而不是“慢速”。尝试7500不，不，它只是从一个切换到一个，即使我给了一个自定义值，也没有任何变化。@学习者将小提琴包括在你的问题中！谢谢，我理解你的观点，但这并不重要