аватар |

Статьи / 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>


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



Распечатать
Похожие статьи
10 февраля 2015 19:10 Как сжать или закодировать JavaScript? Онлайн сервисы
09 апреля 2015 11:17 Как запретить ввод определённых символов или произвести их замену в поле или textarea JS?
31 января 2013 14:07 Как добавить комментарии от vk.com (ВКонтакте) к себе на сайт?
22 апреля 2013 14:41 Как запретить скачивание изображений с сайта?
31 января 2013 13:58 Как добавить сайт в закладки избранное? JavaScript


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