Слайд Шоу

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

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

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

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

<img src="slide_1.gif" id="slaid">

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

<style type="text/css">

img {filter: blendTrans(duration=3.0); }

</style>

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

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

<scritp language="JavaScript" type="text/javascript" >

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

var img_array = new Array(4);

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

for (n=0;n<=3;n++) {

img_array[n] = new Image();

next=n+1;

img_array[n].src = "slide_"+next+".gif";

}

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

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

next=n+1;

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

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

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

i = 1;

function doFilter() {

slaid.filters[0].Apply();

slaid.src = img_array[i].src;

slaid.filters[0].Play();

i = i+1;

if (i == 4) i = 0

}

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

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

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

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

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

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

setInterval("doFilter()", 4000);

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

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

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