Ротатор нескольких изображений на JavaScript

Описание: Я уже писал про ротатор изображений на JavaScript , однако, меня попросили написать скрипт ротатора нескольких изображений на JavaScript . Я решил выполнить эту просьбу, так как такой скрипт может пригодиться многим. Разумеется, можно улучшить данный скрипт, сделав плавное изменение изображений , тогда пол...

Описание: Я уже писал про ротатор изображений на JavaScript, однако, меня попросили написать скрипт ротатора нескольких изображений на JavaScript. Я решил выполнить эту просьбу, так как такой скрипт может пригодиться многим. Разумеется, можно улучшить данный скрипт, сделав плавное изменение изображений, тогда получится уже очень интересное слайд-шоу на JavaScript.

Результат:

Коты	Собаки

Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">

  var counter = 0;

  var delay = 3000; // Время показа слайда в миллисекундах

  var path = "images/"; // Путь к картинкам

  var cats = new Array("cat_1.jpg", "cat_2.jpg", "cat_3.jpg"); // Названия файлов 1-го ротатора

  var dogs = new Array("dog_1.jpg", "dog_2.jpg", "dog_3.jpg"); // Названия файлов 2-го ротатора

  function rotatorMany() {

    document.getElementById("rotator_many_1").src = path + cats[counter];

    document.getElementById("rotator_many_2").src = path + dogs[counter];

    counter++;

    if (counter == cats.length) counter = 0;

    setTimeout(rotatorMany, delay);

  }

</script>

Код HTML (вставлять между тегами <body> и </body>):

<table style="text-align: center;">

  <tr>

    <td>Коты</td>

    <td>Собаки</td>

  </tr>

  <tr>

    <td>

      <img src="images/javascript/cat_1.jpg" id="rotator_many_1" alt="" />

    </td>

    <td>

      <img src="images/javascript/dog_1.jpg" id="rotator_many_2" alt="" />

    </td>

  </tr>

</table>