原型js：使用$$動態div的旋轉div顯示

Question

我想知道爲什麼下面的代碼不起作用，其中「banner」是四個不同div的每一個的css類。結果頁面顯示所有圖像一秒鐘，然後它們全部消失。

<script type="text/javascript"> 
    var bannerArray = new Array(); 
    bannerArray = $$(".banner"); 

    bannerArray.each(function (b) { 
     b.hide(); 
    }); 
    bannerArray.each(function (b) { 
     b.show(); 
     Element.hide.delay(1, b.id); 
    }); 
</script> 

Answer 1

delay不耽誤所有代碼執行。它只會延遲調用特定的功能;其餘的代碼會立即執行，而延遲在後臺倒計時。所以你要爲每個元素同時設置一個「隱藏計時器」。由於它們都具有相同的1秒延遲，所以它們在被設置後都會發射1秒。

試試這個

(function() { // wrap everything in a function to avoid polluting the global namespace 
    var banners = $$('.banner'); // no need to create an empty array first 
    banners.invoke('hide');  // no need to use each 

    function showNextBanner() { 
     banners.last().hide();   // hide previous banner 
     banners.first().show();  // show next banner 
     banners.push(banners.shift()); // first element moves to become last element 
     showNextBanner.delay(1);  // set a timeout to show the next banner 
    } 

    showNextBanner(); // start the banner rotation/looping 
}()); 

Here's a demo