Створення слайд-шоу на веб-сторінці

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

Для початку нам знадобиться тег . в якому і буде відбуватися зміна зображень. Властивості src цього тега дамо ім'я першого файлу в послідовності слайдів, а так само за допомогою властивості id цей тег ідентифікується ім'ям slaid. Для нашого прикладу це буде виглядати наступним чином:

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

Тут видно, що для тега встановлюється фільтр blendTrans (плавний перехід) з параметром duration (тривалість) рівним трьом секундам.

Потім змінну типу масив довжиною в чотири елементи:

var img_array = new Array (4);

Далі слід код, який відповідає за завантаження всіх слайдів до початку слайд шоу:

img_array [n] = new Image ();

Оскільки імена файлів, в яких зберігаються зображення слайдів, відрізняються тільки порядковим номером, то процес їх завантаження можна помістити в цикл for. У тілі циклу перший вираз за допомогою команди new Image () створює об'єкт типу Image (зображення) і привласнює його поточному елементу масиву.

Потім слід вираз:

Воно необхідне, так як елементи масиву починаються з нуля, а нумерація файлів починається з одиниці.

Так як створений раніше об'єкт типу Image за своїми властивостями повністю відповідає тегу . то за допомогою останнього виразу в тілі циклу властивості src даного об'єкту присвоюється ім'я відповідного файлу.

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

Мінлива i. оголошена перед функцією грає роль індексу елементів масиву і за замовчуванням має значення 1.

Перший вираз у функції можна приблизно перекласти українською мовою наступним чином: "Викликати метод Apply () нульового фільтру для об'єкта зображення з ім'ям slaid". Цей метод "заморожує" видиме в даний момент зображення і дозволяє змінити значення параметрів переходу і самого зображення, не вимагаючи негайного застосування переходу.

У другому рядку властивості src об'єкта зображення присвоюється значення властивості src поточного елемента масиву об'єктів зображень завантажених раніше.

У третьому рядку для виконання переходу використовується метод Play ().

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

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

Ця функція виконує операцію або іншу функцію, яка була передана їй першим параметром весь час через проміжок рівний другому параметру, який задається в мілісекундах. У нашому випадку функція doFilter () буде виконуватися через чотири секунди.

Після цього не забудьте закрити тег