Для оформлення кнопок навігації нам буде потрібно фонова картинка. Виконаємо її у вигляді спрайту.
В html розмітці нічого міняти не будемо, розмітку для навігації будемо додавати за допомогою скрипта. Можна, звичайно, розмістити потрібну конструкцію і за допомогою html, але тоді не виникне деяких складнощів, про які поговоримо надалі.
У css злегка підправимо існуючі стилі і додамо стильові правила для кнопок, при натисканні на які будемо перегортати фото вперед / назад.
Блоку обгортці збільшуємо ширину на 40px і зрушуємо зображення на 20px від лівого краю. Тепер по боках у нас з'явилося по 20px вільного простору для навігації. Самі кнопки будемо розміщувати за допомогою елементів span з відповідним класом. Завдяки тому, що стилі для них вже написані, кнопки розмістяться в потрібних місцях, як тільки ми додамо розмітку для них.
Тепер можна приступати до js. Перво наперво розділимо функцію autoCange на дві різні функції.
Тепер autoCange () буде займатися тільки лічильником і в кінці своєї роботи викликатиме функцію cange (). в яку ми винесли код, який відповідає за анімацію зображень.
Наступним кроком реалізуємо функціонал, який буде зупиняти перегортання картинок при наведенні миші на слайдер і відновлювати анімацію, як тільки курсор виявиться поза блоком зі слайдером.
Розглянемо докладніше, що ми тут накоїли. Цілком логічним висновком є те, що якщо є якась функція, що дозволяє запускати один і той же дію з зазначеним інтервалом часу (setInterval), то повинен бути метод, який ця дія скасовує. І дійсно, така функція існує. Називається вона clearInterval. Але що б можна було перервати дію, заплановане setInterval. функції clearInterval як параметр потрібно передати id. який повертає setInterval. Найпростіший і, мабуть, єдиний метод - зберегти id в змінну і передати цю змінну як параметр функції clearInterval.
Іншими словами, спочатку ми створюємо змінну, в якій зберігаємо значення, що повертається функцією setInterval.
Потім за допомогою методу mouseover (); відстежуємо, коли курсор миші з'явиться в області слайдера і застосовуємо clearInterval (); в дужках якого вказуємо ім'я створеної змінної.
І останньою дією на цьому етапі ми відстежуємо, коли курсор миші вийде за межі блоку зі слайдером. Як тільки це відбувається, знову запускаємо анімацію.
Зберігаємо зміни і дивимося, що у нас вийшло. Якщо все зроблено правильно, то при наведенні миші на фото, зміна картинок припиняється і відновлюється, як тільки курсор виявиться поза області зображення. Про всяк випадок нижче показаний повний поточний код. Якщо щось не запрацювало, пошукайте помилку, звіряючись по ньому.
Відмінно, рухаємося далі. Додамо галереї стрілки (стилі для них ми вже написали). Нам уже доводилося виконувати подібну дію, коли додавали маркери в меню "Акордеон".
Якщо подивитися на результат в браузері, то ми побачимо, що кнопки навігації з'явилися, але перегортання фото при кліці по ним не відбувається. Приступаємо до останнього етапу - пишемо логіку для навігації.
Тут, мені здається, все дуже просто і зрозуміло. При кліці на кнопці next збільшуємо значення indexImg на одиницю. Перевіряємо число, зі значенням в змінної indexMax і якщо воно виявляється більшим, то присвоюємо indexImg одиницю. Після цього викликаємо функцію change (алгоритм такий же, як у функції autoCange).
При кліці на кнопці prev значення indexImg зменшуємо на один, перевіряємо чи не стало воно менше одиниці і, якщо таке сталося, то присвоюємо indexImg число, збережене в indexMax (переходимо до останнього фото).
Можна помилуватися результатом в браузері - отримано те, до чого прагнули. Нижче наводжу повний лістинг js коду галереї для самоперевірки:
За посиланням нижче повний варіант того, що було розглянуто в даній статті, кому потрібно - качаємо.
Залишилося навести лоск. Погодьтеся, якщо знадобиться збільшити інтервал зміни фото, або поміняти id у обгортають блоку, або класи у кнопок, то буде не зовсім зручно вносити зміни, нишпорячи по всьому коду в пошуках потрібних значень. У наступній статті наведемо порядок і можна буде демонструвати виконану роботу начальству.