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; Аяксом получаю массив баннеров, с временем проигрывания для каждого баннера. Далее передаю этот массив в функцию которая рекурсивно вызывается при смене каждого баннера, и каждый раз задает разное время проигрывания баннера.