ВНИМАНИЕ: Запись на курсы по HTML, CSS, JavaScript, PHP, Python, React, Vue, Laravel и другим фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→
47 of 73 menu
Бесплатный курс по выкладке сайтов на хостинг. Разбираем все нюансы! Начало 14 октября. Жми для записи!

Простой слайдер картинок на JavaScript

В уроке показана реализация простого слайдера картинок средствами JavaScript. В окне браузера всегда видна одна картинка, которая сменяется другой каждую секунду.

Исходники кода

<div id="slider"><img src=""></div> var images = ['1.png', '2.png', '3.png', '4.png', '5.png']; var slider = document.querySelector('#slider'); var img = slider.querySelector('img'); var i = 1; img.src = 'images/' + images[0]; window.setInterval(function() { img.src = 'images/' + images[i]; i++; if (i == images.length) { i = 0; } }, 1000);

Смотрите также