Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб-орієнтована розробка програмного забезпечення ЗПі-81-20210115T104851Z-001 / Лекція Теоритичні відомості Анімація в javaScript.docx
Скачиваний:
16
Добавлен:
15.01.2021
Размер:
58.57 Кб
Скачать

Слайд-шоу

var URIs = new Array('./images/15-1.jpeg', './images/15-2.jpeg', './images/15-3.jpeg', './images/15-4.jpeg'); // Сохраняем пути в массиве.

var currentImage = 1; // Сохраняем пути в массиве.

function slideShow() { // Определяем функцию.

if (currentImage >= URIs.length) // Не вышел ли счётчик за пределы массива.

currentImage = 0; // Обнуляем счётчик.

document.getElementById('slide').setAttribute('src', URIs[currentImage]); // Меняем картинку.

currentImage++; // Увеличиваем счётчик.

}

setInterval(slideShow, 2500);

Вы можете посмотреть, как же выполнится приведённый код.

Функция вроде бы проста. Единственный нюанс, на который стоит обратить внимание, заключается в бесконечном переборе элементов массива. Как только наш счётчик выходит за пределы длины массива, мы его обнуляем и начинает работу с массивом с самого начала.

Практическое задание №3

Мы перебираем массив последовательно, то есть после первого «слайда» всегда будет идти второй, после второго — третий и так далее. Ваша задача — отображать фото­графии в произ­вольном порядке. Но при этом между любыми повторениями должно быть хотя бы одно альтер­нативное изображение. (Другими словами, изображения a, b, c, d могут идти как a, c, a, c, b, d, но не как a, a, c, c, d, b, то есть не допускайте повторений двух фотографий подряд.)