Мы начинаем с предварительной загрузки изображений. Обратите внимание, что это происходит вне функции, так же, как и задание переменной num. Это выглядит следующим образом:

<SCRIPT type="text/javascript">

    var num=1

    img1 = new Image (150,150)

    img1.src = "pic1.gif"

    img2 = new Image (150,150)

    img2.src = "pic2.gif"

    img3 = new Image (150,150)

    img3.src = "pic3.gif"

Теперь функция:

function startshow()

 {

  for (i=0; i<21; i=i+1)

{document.mypic.src=eval("img"+num+".src")

    for(x=1; x<8000; x=x+1)

    {}

    num=num+1

    if(num==4)

     {num=1}

    }

  document.mypic.src=img1.src

    }

</SCRIPT>

startshow() содержит новый элемент, вложенные циклы! Видите, внутри первого цикла for находится второй (слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.

Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 8000 после появления каждой картинки. На это уходят доли секунды.

Внешний цикл заставляет программу повторяться в цикле 21 раз. Видите это в функции: в первом операторе цикла for (i=0; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.

Когда цикл закончится, картинка снова вернется к pic1.gif.

Вот команда, которая помещает первое изображение на страницу:

<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 alt="">

Обратите внимание, что имя задано как "mypic". Если посмотреть на иерархию операторов в сценарии, то оно находится между document и src.

И наконец ссылка, которая запускает анимацию:

<A HREF="JavaScript:startshow()">Показать анимацию</a>

Снова команда HREF указывает на JavaScript:функция(), чтобы все глобальные переменные были доступны.