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

prototype js：使用$$为动态div旋转div显示

1 个答案: