Перший крок – це створити HTML-розмітку для повзунка зображення. Розмітка міститиме невпорядкований список (<ul>), який містить усі зображення. Кожен елемент списку (<li>) матиме зображення та підпис. Тепер візьміть елементи HTML, використовуючи їх класи та ідентифікатори, щоб стилізувати їх за допомогою стилів CSS.
Нижче наведено визначення автовідтворення:
- var Autoplay = { timerId: null, interval: 4000, start: function() { this. timerId = setInterval(function() { newIndex++; navigateSlider(); }, це…
- var enableAutoplay = true; if (enableAutoplay) { Автовідтворення. початок(); }
- function navigateSlider() { if (enableAutoplay) { Autoplay.
Щоб щоразу викликати функцію повзунка для зміни URL-адреси зображення та динамічної зміни зображень, ми використовуйте метод setInterval для виклику функції повзунка кожні 2 секунди(тобто 2000 мілісекунд). Ми динамічно змінюємо зображення кожні 2 секунди, викликаючи функцію повзунка за допомогою методу SetInterval().
Створення автоматичного слайдера зображення з кнопками навігації
- .slider { ширина: 100%; висота: 510 пікселів; положення: відносне; } .slider img { ширина: 100%; висота: 500px позиція: абсолютна; зверху: 0; ліворуч: 0; } .slider img:first-child { z-index: 1; } .slider img:nth-child(2) { z-index: 0; }
- .
У JavaScript, налаштуйте змінну для доступу до зображень повзунка, а потім перейдіть до кожного зображення за допомогою циклу for і налаштуйте setInterval() для виклику циклу for через певний інтервал. var sliderImages = документ. querySelectorAll('. slider img'); змінна i = 0; функція slider(){ for(var j = 0; j < sliderImages.