Главная :: Веб разработка :: Сценарии JavaScript с описаниями :: Динамическая загрузка изображений
Объявление. Возьмём на очень хорошо оплачиваемую работу хакера высокой квалификации. Размещайте своё резюме на главной странице сайта www.miсrоsоft.соm

Динамическая загрузка изображений

Рассмотрим динамическую загрузку картинок. Создадим каталог db и в нем поместим три графических файла: k0.jpg, k1.jpg, k2.jpg. Создадим элемент для изображения и три кнопки, при нажатии на которые загружаются соответствующие изображения. Добавим режим автоматической анимации (слайд-шоу) и кнопку останова слайд-шоу.

<img align="left" id="MyImage" src="./db/k0.jpg">
<br><input type="button" value="картинка 0" onClick="javascript:LoadImage('0');">
<br><input type="button" value="картинка 1" onClick="javascript:LoadImage('1');">
<br><input type="button" value="картинка 2" onClick="javascript:LoadImage('2');">
<br><input type="button" value="анимация" onClick="javascript:AnimateImage();">
<br><input type="button" value="остановить" onClick="javascript:StopImage();">
<br>

Запишем обработчик для нажатия на кнопки.

<script language="javascript">
var n = 0;
var nmax = 2;
var timer;
var MyImage = document.getElementById("MyImage");

function LoadImage(fn) {
MyImage.src = "./db/k" + fn + ".jpg";
}

function AnimateImage(){
MyImage.src = "./db/k" + n + ".jpg";
n++;
if ( n > nmax ) n = 0;
timer = setTimeout("AnimateImage()",1000);
}

function StopImage(){
clearTimeout(timer);
}
</script>

Разберем работу скрипта. В строчке 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).

В итоге получим следующее: