1

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

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 个，但在遍历列表时会删除每个图像。我可以overflow:hidden;在我的 CSS 中使用，但我不希望这样。当它达到0时它也不会重复。

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

**我尝试制作graphic一个数组，但我也无法让它工作。

小提琴

4

1 回答 1

0

使用以下代码重构了您的逻辑.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);
}());

小提琴

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

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

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

以上只是为了便于阅读，它与第一个片段具有相同的效果。

于 2013-03-21T12:22:30.253 回答