Интернет технологии -> JavaScript -> Слайд Шоу

Слайд Шоу

Если Вы web-дизайнер и Вам понадобилось сотворить череду изображений сменяющих друг друга при помощи какого-либо эффекта перехода, то здесь я позволю себе предложить Вам один из способов реализации этой затеи.

Для реализации задуманного Вам потребуется: Ваши изображения (желательно одного размера) и любой текстовый редактор способный редактировать html-документы.

Для примера возьмем четыре файла формата GIF и поименуем их slide_1.gif - slide_4.gif соответственно. Затем создайте файл index.html и откройте его в текстовом редакторе.

Для начала нам понадобится тег <img>, в котором и будет происходить смена изображений. Свойству src этого тега присвоим имя первого файла в последовательности слайдов, а так же при помощи свойства id этот тег идентифицируется именем slaid. Для нашего примера это будет выглядеть следующим образом:

Теперь необходимо, при помощи CSS, указать какой фильтр будет использован для перехода между изображениями. В нашем случае это выглядит следующим образом:

Здесь видно, что для тега <img> устанавливается фильтр blendTrans (плавный переход) с параметром duration (продолжительность) равным трем секундам.

Теперь можно переходить к непосредственному написанию сценария на языке JavaScript, который будет выполнять замену изображений. Для этого откроем тег:

Затем переменную типа массив длиной в четыре элемента:

Далее следует код, который отвечает за загрузку всех слайдов до начала слайд шоу:

Поскольку имена файлов, в которых хранятся изображения слайдов, отличаются только порядковым номером, то процесс их загрузки можно поместить в цикл for. В теле цикла первое выражение при помощи команды new Image() создает объект типа Image (изображение) и присваивает его текущему элементу массива.

Затем следует выражение:

Оно необходимо, так как элементы массива начинаются с нуля, а нумерация файлов начинается с единицы.

Так как созданный ранее объект типа Image по своим свойствам полностью соответствует тегу <img>, то при помощи последнего выражения в теле цикла свойству src данного объекта присваивается имя соответствующего файла.

После того как все изображения были загружены в оперативную память пользователя, можно приступать к реализации перехода между ними. Для этого напишем следующую функцию:

Переменная i, объявленная перед функцией играет роль индекса элементов массива и по умолчанию имеет значение 1.

Первое выражение в функции можно примерно перевести на русский язык следующим образом: “Вызвать метод Apply() нулевого фильтра для объекта изображения с именем slaid”. Этот метод “замораживает” видимое в данный момент изображение и позволяет изменить значение параметров перехода и самого изображения, не требуя немедленного применения перехода.

Во второй строке свойству src объекта изображения присваивается значение свойства src текущего элемента массива объектов изображений загруженных ранее.

В третьей строке для выполнения перехода используется метод Play().

Затем осуществляется переход к следующему элементу массива при помощи увеличения индекса массива на единицу. После чего индекс сравнивается с четверкой и если результатом сравнения будет true (истина), то индекс обнуляется.

Теперь нам осталось только вызвать нашу функцию при помощи функции setInterval(). Для нашего примера это выглядит так:

Эта функция выполняет операцию или другую функцию, которая была передана ей первым параметром все время через промежуток равный второму параметру, который задается в миллисекундах. В нашем случае функция doFilter() будет выполнятся через четыре секунды.

После этого не забудте закрыть тег <script>.

И в завершении хотелось бы заметить, что в HTML 4.0 существует еще один фильтр перехода revalTrans, который позволяет осуществлять переходы между изображениями аж 24-я способами. А главное то, что это слайд шоу можно легко адаптировать для взаимодействия с другими частями вашего сайта, такими как кнопки, ссылки и остальные управляющие элементы.

Автор: Тищенко В. А.