прототип js: вращение отображения div с использованием $$ для динамических div - PullRequest
Новая
       24

прототип js: вращение отображения div с использованием $$ для динамических div

0 голосов
/ 31 августа 2011

Мне интересно, почему следующий код не работает, где "banner" - это класс css каждого из четырех различных div.Полученная страница отображает все изображения в течение одной секунды, а затем все они исчезают.

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

1 Ответ

0 голосов
/ 31 августа 2011

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
}());

Вот демонстрационная версия

...