prototypejs - 原型 js：使用 $$ 为动态 div 旋转 div 显示

Question

我想知道为什么下面的代码不起作用，其中“横幅”是四个不同 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
}());

这是一个演示