Приветствия към вас, скъпи приятели! В този кратък урок ще ви покажа как най-простият начин да се създаде слайдшоу!
В нашата галерия, когато промените изображението, ние ще използваме малък ефект, а именно - промяна на прозрачността на изображения!
Обикновен HTML код:
Всичко е много просто - за да блокира клас слайдшоу сложи снимката, който ще бъде първият.
Но в действителност, посочените по-горе стилове класа:
Определя ширината и блокове са подредени в центъра.
На първо място, вектор image_array, съдържащ връзки към изображения. Ако трябва да се добавят, изтриват или променят галерията от снимки, можете просто да замени препратките в масива - нищо повече е необходимо да се промени!
Променлива image_num използва като брояч снимки. Когато стигаме до последното изображение на масива, ние нула тази променлива да тече отново от първата снимка (вземане на една линия).
След това е функцията за слайдшоу, която изпълнява превъртане - това е направено така (стъпка по стъпка):
- правене на снимка на блока към клас слайдшоу;
- Ние направи прозрачен до 40% (това се случи 500 милисекунди);
- след това да промените SRC атрибут от картинката (промяна на връзката за по-голям и го приел от image_array масив);
- допълнително направи опакер картина (това се случва и 500 милисекунди).
Както вече казах, IMAGE_NUM променлива - е на тезгяха, което ние сравняваме с дължината на масива (тоест, с броя на изображенията, които участват в слайдшоуто) и ако IMAGE_NUM равна на максималната стойност, а след това нула от нея.
слайд функция се задейства всеки 3 секунди (3000 милисекунди) от интервала (на setInterval), което означава, че изображенията ще се прелисти всеки 3 секунди.
Както можете да видите, нищо сложно!
Това е всичко, до нови уроци, досега!
Свързани статии