Question

我有一个非常简单的列表，其中包含我需要循环的图像。这是脚本：

var graphic = $('#banner li');
  graphic.hide();
    cycle = $(graphic).each(function(i,e) {
      while(i-- >= 0){
        $(e).show(300).delay(2000).hide(300)
      }
      if(i===0){cycle()}
    })

它几乎可以工作..它一次显示所有图像而不是1，但是当它通过列表时删除每个图像。我可以在我的CSS中使用overflow:hidden;，但我不想这样做。当它达到0时它也不会重复。

请帮忙。对于这么简单的任务，我不想要臃肿的循环插件。谢谢！

**我尝试将graphic放入数组中，但我也无法使其工作。

The Fiddle

Answer 1

使用.eq重构您的逻辑：

var graphic = $('#banner li').hide(), //hide and cache list items selector
    i = 0,
    l = graphic.length;
(function cycle() {
    graphic.eq(i++ % l).show(300).delay(2000).hide(300, cycle);
}());

Fiddle

通过将IIFE本身作为回调传递，我们在当前迭代的.hide()动画完成后，为下一个项目进行显示，延迟和隐藏循环重复。

您可以在函数末尾增加i并在进入IIFE之前调用graphic.hide()，有些人可能认为这更易读：

var graphic = $('#banner li'),
    i = 0,
    l = graphic.length;
graphic.hide();
(function cycle() {
    graphic.eq(i % l).show(300).delay(2000).hide(300, cycle);
    i++;
}());

以上仅用于可读性目的，它与第一个片段具有相同的效果。

jQuery：使用.each循环列表

1 个答案: