аватар Автор: Сергей Касаткин | 17 сентября 2013 11:52

Статьи / JavaScript /

Как сделать смену (ротацию) изображений на Java Script?

В данной статье разберём пример работы ротации изображений, написанной на Java Script. Решение довольно-таки популярное. Зачастую используется как слайдер изображений в верхней части сайта, прокрутка рекламных баннеров или показ слайдов фотогалереи.

Сам скрипт ротации на Java Script вставляем между тегами <head> и </head>

Код JavaScript

<script type="text/javascript">
  var array = new Array(
    "images/photo001.jpg",
    "images/photo002.jpg",
  ); //массив с путями к картинкам. Можно по аналогии добавить изображения
  var delay = 2000; // время задержки одного изображения в миллисекундах = 2 сек
  function imageRotation(i) {
    var image = document.getElementById("rotator");
    image.src = array[i];
    i++;
    if (i == array.length) i = 0;
    setTimeout("imageRotation(" + i + ")", delay);
  }
</script>

Выбираем объект в теле документа, который должен стоять между тегами <body> и </body> и присваиваем ему id rotator. Возьмём за пример изображение и тег <img>

Код HTML

<p>
  <img id="rotator" src="" alt="Ротация изображений" width="150" height="150" />
</p>


Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)