Джо Бернс/Как сложить все вместе: слайд-шоу

Джо Бернс
Урок 27. Как сложить все вместе: слайд-шоу.
Концепция

Три последних урока посвящены тому, как сложить все вместе.

Посмотрите на скрипт и попробуйте сами разобраться, как и что он делает. А лучше всего постарайтесь изменить его. В сегодняшнем примере пользователь щелкает по ссылке и переходит к следующей картинке. Мы воспользуемся командой 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> <A HREF="JavaScript:slideshow()"> Щелкните, чтобы увидеть следующую картинку</A> </CENTER> </BODY> </HTML>

Эффект

Щелкните, чтобы увидеть
следующую картинку
Разбор скрипта
Разобьем его на две части:

<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"

Вот кое-что новое! num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть, доступной для любой функции.
img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в pic1.gif ; img2 хранится в pic2.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, num возвращается к 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>

Ваше задание

Перепишите сегодняшний скрипт. Покажите первым leo.gif, как в примере. Однако дальше новый cкрипт должен показать img3.src (num=3), потом img2.src, потом img1.src. Когда num=0, измените num на 3.

В общем, перепишите скрипт задом наперед.

Назад | Содержание | Вперед