аватар |

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


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



Распечатать
Похожие статьи
22 июля 2015 14:08 Как снять выбор (check) с радио-кнопки (radio button)
26 августа 2013 11:08 Как запретить копирование текста с сайта?
31 января 2013 14:20 Как добавить на сайт виджет сообществ от vk.com?
31 января 2013 13:58 Как добавить сайт в закладки избранное? JavaScript
11 мая 2017 12:26 Как открыть изображение в новом окне?


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