Навеяно
этим топиком по теме. Можно сказать, что это более усовершенсвованный способ, так как контентом могут выступать и изображения (картинки).
Три кита: код на JavaScript, разметка HTML, стили CSS.
1. JavaScriptfunction slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// показываем картинки по-очереди, одна за другой
var $next = $active.next().length ? $active.next() : $('#slideshow DIV:first');
// если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); });
};
$(function() {
setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});
2. HTML<div id="slideshow">
<div class="active">контент 1</div>
<div>контент 2</div>
..................................
<div>контент n</div>
</div>
3. CSS#slideshow { position:relative; height:400px; }
#slideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 400px; background-color: #FFF; }
#slideshow DIV.active { z-index:10; opacity:1.0; }
#slideshow DIV.last-active { z-index:9; }
Класс стиля
class=«active» можно изначально назначать на желаемый div-контент. Параметр
height:400px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.
Комментарии (0)
RSS свернуть / развернутьТолько зарегистрированные и авторизованные пользователи могут оставлять комментарии.