原型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