15 мая 2023 года "Исходники.РУ" отмечают своё 23-летие!
Поздравляем всех причастных и неравнодушных с этим событием!
И огромное спасибо всем, кто был и остаётся с нами все эти годы!

Главная Форум Журнал Wiki DRKB Discuz!ML Помощь проекту


Как анимировать картинку

Последовательный показ определённого количества картинок работает в Netscape Navigator 3.0+ и Internet Explorer 4.0+. Поместите URL-ы картинок, которые Вы хотели бы показывать в массив. Как только пользовать кликнет по ссылке, при помощи функции setTimeout картинки начинают показываться через одинаковые промежутки времени.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
   var imageArray = new Array("squares.gif", "circles.gif",
    "diamonds.gif");
   var currentImage = 0;
   var timerId;

   function showImage() {
      currentImage++;
      if (currentImage > 2) {
         currentImage = 0;
      }
      document.images[0].src = imageArray[currentImage];
      timerId = setTimeout("showImage()", 2000);
   }
</SCRIPT>
</HEAD>

<BODY>
<A HREF="javascript:showImage()">Animate Image</A><BR><BR>
<IMG SRC="squares.gif">
</BODY>
</HTML>

ЗАМЕЧАНИЕ: Так как картинки предварительно не загружены, то необходимо обеспечить необходимый интервал показа картинок, чтобы они успели загружаться.