Приклад цього слайд-шоу можна побачити на головній сторінці нашого сайту в лівій колонці (новинки PS3).
По-перше, давайте створимо html код, як можна легше. Спочатку зробимо контейнер div з id = "slideshow». в який ми помістимо наші зображення.
Зверніть увагу на class = "active». Цей клас буде говорити скрипту, що це зображення повинно бути відразу видимим, навіть при відключеному в браузері JS.
Тепер опишемо стилі CSS, в яких опишемо позиціонування зображення відносно один одного, і зробимо активне зображення на вищому рівні z-index:
Тут ми зробили абсолютне позиціонування і визначили висоту контейнера для слайд-шоу (#slideshow). Крім того, зверніть увагу, на те що ми створили три різних z-index - ми будемо маніпулювати ними за допомогою jQuery.
Для анімації слайд-шоу ми будемо перемикати зображення по черзі. Для цього напишемо функцію, яка буде відображати нове зображення поверх активного:
Далі ми повинні зробити зникнення зображень:
Застосуємо клас 'last-active' у якого z-index дорівнює 9, що б опустити зображення, під «active«. І потім зробимо його прозорим, виставивши opacity в 0 і за допомогою функції animate () робимо плавне зникнення. І тепер робимо запит (callback) на видалення z-index класів з попереднього зображення, коли анімація (animate ()) завершується.
Хоча наше слайд-шоу вже працює добре, ми повинні зробити його більш надійним задавши для деяких змінних значення за замовчуванням. Для цього визначимо за замовчуванням активне зображення. І зробимо повторення анімації.
Спочатку визначте зображення за замовчуванням для змінної $ active, яке при цьому має бути останнім зображення в блоці. Це пояснюється тим, що на основі абсолютного позиціонування, остання картинка з'являється на верху, і ми повинні почати з неї, якщо ми хочемо уникнути мерехтіння.
Якщо ви хочете поліпшити цю функцію, спробуйте пограти зі швидкістю анімації. Крім того, в цьому слайд-шоу можна легко перетворити підтримку DIV, замість IMG.
пожертвувати
Не підкажете, якщо картинки різного розміру, то попередні визирають. Як це можна виправити? Оч. потрібно) Заранее спасибо.
Alex, можна задати картинкам фіксований розмір, або як варіант реалізувати це все на div'ax.