Вітаю вас дорогі друзі! У цьому невеликому уроці я покажу, як можна найбільш простим способом створити слайд-шоу!
В нашій галереї, при зміні зображення, ми буде використовувати невеликий ефект, а саме - зміна прозорості картинки!
Простий Html код:
Тут все дуже просто - в блок з класом slideshow поміщаємо зображення, яке буде першим.
А ось, власне, і стилі вищезгаданого класу:
Задаємо ширину і вирівнюємо блок по центру.
Спочатку описується масив image_array, що містить посилання на зображення. Якщо вам потрібно додати, видалити або змінити картинки галереї, то просто замініть посилання в цьому масиві - більше нічого змінюватися не потрібно!
Мінлива image_num використовується в якості лічильника картинок. Коли ми доходимо до останньої картинки масиву, ми Обнуляємо цю змінну, щоб знову почати показ з першої картинки (робимо зациклення).
Далі йде функція slide, яка і реалізує перегортання - це робиться так (по кроках):
- беремо картинку з блоку з класом slideshow;
- робимо її на 40% прозорою (це відбувається за 500 мілісекунд);
- після цього міняємо атрибут src у картинки (міняємо посилання на картинку, взявши її з масиву image_array);
- далі робимо картинку непрозорою (це теж відбувається за 500 мілісекунд).
Як я вже говорив, змінна image_num - це лічильник, його ми порівнюємо з довжиною масиву (тобто з кількістю картинок беруть участь в слайд шоу) і якщо image_num дорівнює максимальному значенню, то Обнуляємо його.
Функція slide запускається кожні 3 секунди (3000 мілісекунд) за допомогою інтервалу (setInterval), це означає, що картинки будуть перегоратися кожні 3 секунди.
Як бачите, нічого складного немає!
На цьому все, до нових уроків, поки!