Рассмотрим динамическую загрузку картинок. Создадим каталог db и в нем поместим три графических файла: k0.jpg, k1.jpg, k2.jpg. Создадим элемент для изображения и три кнопки, при нажатии на которые загружаются соответствующие изображения. Добавим режим автоматической анимации (слайд-шоу) и кнопку останова слайд-шоу.
Запишем обработчик для нажатия на кнопки.
Разберем работу скрипта. В строчке var MyImage = document.getElementById("MyImage");
мы связываем переменную MyImage с элементом изображения. Переменные n и nmax содержат текущее и максимальное значение для изображения. Переменная timer нам понадобится для управлением таймером.
Функция LoadImage(fn)
загружает картинку с номером fn. Конечно, вы можете передавать имя графического файла. В примере мы используем номера для простоты. Имя файла конструируется из пути и начала имени "./k", далее идет номер и в конце расширение ".jpg".
Функция AnimateImage()
запускает анимацию. При каждом вызове переменная n увеличивается на единицу и обнуляется, если переходит предел для максимального номера nmax. В конце мы указываем, что эта функция должна запуститься еще раз через 1 секунду (1000 милисекунд): setTimeout("AnimateImage()",1000)
. Таким образом, при каждом вызове функции устанавливается таймер для вызова ее снова через интервал времени. Таймер мы привязываем к переменной timer.
Для останова анимации функция StopImage()
вызывает функцию clearTimeout(timer)
.
В итоге получим следующее: