Представляю Вашему вниманию двадцать восьмой выпуск информационной рассылки сайта "Свободное и бесплатное ПО". В этом выпуске мы продолжим серию уроков, посвященных JavaScript.
Новости наших проектов. Подарок для студентов.
В текущем выпуске мы поработаем с загрузкой картинок.
Рассмотрим динамическую загрузку картинок. Создадим каталог db и в нем поместим три графических файла: k0.jpg, k1.jpg, k2.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>
Запишем обработчик для нажатия на кнопки.
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).
Смотрим пример выполнения сценария.
До новых встречь! Оставайтесь с нами.
- Адрес сайта: Свободное и бесплатное ПО, Веб дизайн в примерах.
- Форум: originweb.net.
- Наука, техника, образование: originweb.info.
- Для новых подписчиков: архив рассылки (другие наши рассылки).