JavaScript « Ротация баннеров через разные промежутки времени

Всем привет! Нужно сделать скрипт который бы менял несколько баннеров через определенные промежутки времени, причем эти промежутки у каждого баннера разные. Подскажите как это можно сделать в JavaSctipt?

1 ответов


Когда то делал такую штуку для одного проекта, правда с одним баннером.

http://jsfiddle.net/TRDT4/1/

Принцип думаю понятен будет. И да, там время в секундах указывается (для заказчика нужно было).

Если в краце, то:
1. Для каждого слайда задаем время, например, атрибутом data-time
2. Собираем эти данные в массив
2. Пишем функцию которая будет прокручивать баннеры
3. При каждой смене слайда останавливаем таймер, подставляем новое время из массива и запускаем функцию смены слайда уже с новым временем


Я сделал так:


jQuery(document).ready(function(){
    if (jQuery('#banner-carousel').html()!=null) {
        jQuery.ajax({
            type: "GET",
            url: '/ajax/get-banners-list',
            success: function(data) {
                _rotateBannersData = data;
                rotateBanners();
            }
        });
    }
});

var _rotateBannersData = null;
var _currentBannerId = 0;
var _prevBannerId = 0;
var _rotattorTimer = null;
function rotateBanners() {
    if(_rotattorTimer != null) {
        clearTimeout(_rotattorTimer);
    }

    $('#banner-carousel > #banner' + _prevBannerId).css('display', 'none');
    $('#banner-carousel > #banner' + _currentBannerId).css('display', 'block');

    _rotattorTimer = setTimeout("rotateBanners()", _rotateBannersData[_currentBannerId]['duration'] * 1000);
    _prevBannerId = _currentBannerId;
    _currentBannerId = _rotateBannersData.length - 1 == _currentBannerId ? 0 : _currentBannerId + 1;
}
 

На странице располагаю все нужные баннеры в виде списка ul li, для каждого li задаю display: none; Аяксом получаю массив баннеров, с временем проигрывания для каждого баннера. Далее передаю этот массив в функцию которая рекурсивно вызывается при смене каждого баннера, и каждый раз задает разное время проигрывания баннера.