- •Анимация в JavaScript Строка состояния и эффект «бегущей» строки Строка «бежит» слева направо
- •Строка «бежит» справа налево
- •Практическое задание №1
- •Введение в объектную модель документа (dom) Обращение к элементу
- •Смена оформления элемента
- •Мигание
- •Математические функции и перемещение элементов Математические функции
- •Перемещение элементов
- •Полярная система координат
- •Основы перемещения элементов
- •Движение по прямой
- •Движение по окружности
- •Движение исключительно в пределах окна
- •Практическое задание №2
- •Слайд-шоу
- •Смена картинок
- •Слайд-шоу
- •Практическое задание №3
Слайд-шоу
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, то есть не допускайте повторений двух фотографий подряд.)