Концепция
Три последних урока посвящены тому, как сложить все вместе.
Посмотрите на скрипт и попробуйте сами разобраться, как и что он делает. А лучше всего постарайтесь изменить его. В сегодняшнем примере пользователь щелкает по ссылке и переходит к следующей картинке. Мы воспользуемся командой If и переменной num. Ничего нового? Не совсем!
Скрипт
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
var num=1
img1 = new Image
()
img1.src = "leo.gif"
img2 = new Image ()
img2.src = "dino.gif"
img3 = new Image ()
img3.src =
"rhino.gif"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.animal.src=eval("img"+num+".src")
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG
SRC="leo.gif" NAME="animal" BORDER=0>
<p>
<A
HREF="JavaScript:slideshow()">
Щелкните, чтобы увидеть
следующую
картинку</A>
</CENTER>
</BODY>
</HTML>
Эффект
Разбор скрипта
Разобьем его на две части:
<SCRIPT
LANGUAGE="javascript">
var num=1
img1
= new Image ()
img1.src =
"img1.jpg"
img2
= new Image ()
img2.src =
"img2.jpg"
img3 = new Image
()
img3.src =
"img3.jpg"
Вот кое-что новое! num=1 не находится внутри функции. Да и
вообще ни одна команда не находится внутри функции. num — это
переменная. Указывая ее в начале скрипта вне функции, мы делаем ее
глобальной переменной, то есть доступной для любой функции.
img1 = new Image() объявляет новый объект image
(рисунок). img1.src= источник объекта, файл, в
котором хранится картинка. Это стандартная схема. img1
хранится в leo.gif ; img2 хранится в
dino.gif.
(В скобках) содержится информация о ширине и высоте рисунка.
Это не обязательно, но желательно.
Рисунки тоже доступны для любой функции. Таким образом, программа
загружает рисунки в память компьютера. Для следующего примера это будет
еще важнее. Пользователь не хочет ждать, пока каждая картинка будет
загружаться с сервера.
Теперь часть №2:
function slideshow()
{
num=num+1
if
(num==4)
{num=1}
document.animal.src=eval("img"+num+".src")
}
</script>
</head>
<body>
Первоначальное значение num равно 1. Это было еще в первом
фрагменте. Когда пользователь щелкает по строчке текста, запускается
функция slideshow.
slideshow() прибавляет к num единицу. Когда num доходит до 4,
то возвращается к 1. document.animal.src меняется на img плюс
значение num и плюс .src. Например, если num = 1, то
document.animal.src становится img1.src.
Обратите внимание, что команда eval() преобразует
img1.src в указание на источник изображения. Без нее это был бы
простой набор букв.
И наконец:
<a href="JavaScript:slideshow()">Щелкните,
чтобы
увидеть следующую картинку</a>
Тут кое-что новенькое. Видите, вызывается не функция, а JavaScript? Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.
В Эксплорере работает и обычная схема, то есть:
<a href=""
onClick="slideshow()">Щелкайте</a>
Ваше задание
Перепишите сегодняшний скрипт. Покажите первым img1.jpg, как в примере. Однако дальше новый cкрипт должен показать img3.src (num=3), потом img2.src, потом img1.src. Когда num=0, измените num на 3.
В общем, перепишите скрипт задом наперед.
Возможный ответ здесь
