Отправляет email-рассылки с помощью сервиса Sendsay

Дизайн сайта как инструмент продажи

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

10.132 подписчиков
-10 за неделю
←   Все выпуски   →

Уроки веб-дизайна с подробными примерами


Уважаемые подписчики!

Представляю Вашему вниманию двадцать восьмой выпуск информационной рассылки сайта "Свободное и бесплатное ПО". В этом выпуске мы продолжим серию уроков, посвященных JavaScript.

Новости наших проектов. Подарок для студентов.

В текущем выпуске мы поработаем с загрузкой картинок.

Рассмотрим динамическую загрузку картинок. Создадим каталог 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).

Смотрим пример выполнения сценария.

До новых встречь! Оставайтесь с нами.

В избранное