УРОК 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>
<p>

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

Теперь часть №2:

function slideshow()
{
num=num+1
if (num==4)
  {num=1}
document.animal.src=eval("img"+num+".src")
}
</script>
</head>
<body>

И наконец:

<a href="JavaScript:slideshow()">Щелкните,
чтобы увидеть следующую картинку</a>

В Эксплорере работает и обычная схема, то есть:
<a href="" onClick="slideshow()">Щелкайте</a>

Ваше задание

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

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

Получившийся скрипт

Возможный ответ здесь




<<назад на урок 26>>

<<Содержание>>

<<вперед на урок 28>>

Сайт создан в системе uCoz