Здесь с помощью JavaScript создается анимационная картинка. Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Помните, как это делается? Через команды new Image() и img.src, стоящие вне функции.
Если не позаботиться об этом заранее, то пользователю придется ждать, пока каждая картинка будет загружаться с сервера. Какая же это анимация!
Скрипт
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
var num=1
img1 = new Image
(77,76)
img1.src = "pic1.gif"
img2 = new Image (77,76)
img2.src =
"pic2.gif"
img3 = new Image (77,76)
img3.src = "pic3.gif"
function startshow()
{
for (i=1;
i<21;
i=i+1)
{document.mypic.src=eval("img"+num+".src")
for(x=1; x<800; x=x+1)
{}
num=num+1
if(num==4)
{num=1}
}
document.mypic.src=img1.src
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG
SRC="pic1.gif" NAME="mypic" BORDER=0>
<p>
<A
HREF="JavaScript:startshow()">
Показать
анимацию</a>
</CENTER>
</BODY>
</HTML>
Результат
(В Експлорере скрипт не работает.)
Разбор скрипта
Обратите внимание еще раз, что рисунки, как и переменная num, вынесены за рамки функции:
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 =
new Image (77,76)
img1.src = "pic1.gif"
img2 = new Image
(77,76)
img2.src = "pic2.gif"
img3 = new Image (77,76)
img3.src =
"pic3.gif"
И сама функция:
function startshow()
{
for (i=1;
i<21;
i=i+1)
{document.mypic.src=eval("img"+num+".src")
for(x=1; x<800; x=x+1)
{}
num=num+1
if(num==4)
{num=1}
}
document.mypic.src=img1.src
}
</SCRIPT>
<IMG SRC="pic1.gif" NAME="mypic"BORDER=0>
<A HREF="JavaScript:startshow()">Display animation</a>
Снова команда HREF указывает на JavaScript:функция(), чтобы все переменные были доступны.
Ваше задание
Перепишите программу. Пусть первым будет pic1.gif, как в сегодняшнем примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет быстро. 1600 будет умеренно. 2400 будет медленно. Запускать анимацию должна текстовая ссылка «Показать анимацию».
Возможный ответ здесь