jQuery：使用。每個循環列表

我有一個非常簡單的列表，其中包含我需要循環的圖像。下面是該腳本：jQuery：使用。每個循環列表

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

來源

2013-03-20 Casey Dwayne

'cycle（）'沒有多大意義，它是一個對象而不是函數... – 2013-03-20 18:35:10

我只是試圖引用該函數。原始腳本被封裝在'animateBanner（）'中。我不能引用'cycle（）'？ – 2013-03-20 18:37:18

在旁註中，你不需要$（圖形）'''graphic'已經是一個jQuery對象;只是使用'graphic.each（...'。 – ClarkeyBoy 2013-03-20 18:42:20

重構你的邏輯.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++; 
}());

以上僅僅是爲了可讀性目的，它具有相同的效果第一個片段。

來源

2013-03-21 12:22:30

jQuery：使用。每個循環列表

回答

相關問題