Теперь функция для создания слайдшоу.
$(document).ready(function (){slideshow();});
function slideshow(){
var t = $('div.slideshow img.show');
n = t.next().length ? t.next() : t.parent().children(':first');
t.hide().removeClass('show');
n.fadeIn('slow').addClass('show');
setTimeout(slideshow, 3000);
}Что к чему:
$(document).ready() сообщает, что функция должна исполнится после полного формирования обьектной модели документа(DOM)
var t = $('div.slideshow img.show'); -- этот код определяет какое изображение сейчас показывается.
n = t.next().length ? t.next() : t.parent().children(':first'); -- эта строка определяет следующее изображение(если следующего нет, то берётся первое)
t.hide().removeClass('show'); -- ыта строка убирает из виду текущее изображения
n.fadeIn('slow').addClass('show'); -- а эта показывает следующее
setTimeout(slideshow, 3000); -- эта строка указывает браузеру, что функцию нужно вызывать каждые 3 секунды
Прошу обратить внимание Димарио на 3ю и последнюю строки ;)
Эта функция превратит в слайдшоу любой набор изображений заключенный в div класс slideshow.
Вот пример HTML кода для слайдшоу:
<div class="slideshow">';
<img src="' . $home . '/images/slideshow/1.png" class="show"/>
<img src="' . $home . '/images/slideshow/2.jpg"/>
<img src="' . $home . '/images/slideshow/3.png"/>
</div>
Текущее изображение должно иметь класс show.
Вот CSS код:
.slideshow{
background: #608cb8;
height: 100px;
width: 100%;
}
.slideshow img{display: none;}
.slideshow img.show{display: block;}