如何无限循环项目列表

How to loop a list of items infinitely?

本文关键字：列表 项目 无限循环      更新时间：2024-05-20

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

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

这是我正在尝试的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);

我无法弄清楚这个问题的原因是什么。请帮助我度过难关。

谢谢。

编辑：我已经做了一个小提琴，但没有想到将其包含在我的问题中......http://jsfiddle.net/654DX/2/。

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

你在问题中编码它的方式会产生很多很多tick((，这就是为什么你注意到速度加快的原因。以这种方式编码只允许一个tick((，因此每5秒产生一次效果。

我在你的脚本中注意到的最大错误是递归使用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);
    });
});

我做了类似的东西：http://jsfiddle.net/wared/GJvLw/。

每次执行tick也会再次执行setInterval！

你可以这样尝试：

function tick() {
    $('#itemflowslider ul li').animate({top:"-225px"},"slow");
    $("#itemflowslider ul li:first").appendTo("#itemflowslider ul");
}
$(function(){
    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
});

Slow = 600 毫秒，因此 4400 毫秒 (5000 - 600( 什么都不会移动，当时间消失时会消失。

编辑：

根据我更新的小提琴的评论

function tick() {
    var $ul = $('#itemflowslider ul');
    var $li1 = $ul.find("li").first();
    $ul.append($li1.clone());
    $li1.css({
        height: '1em',
        visibility: 'hidden'
    })
    .animate({height: 0}, 'slow', function(){
        $(this).remove();
    });
    setTimeout(tick, 5000); // start tick again
}
$(tick);

你可以做这样的事情：

$(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);
   });
}
相关文章：