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

Сегодня для одного проекта потребовался простой слайдер картинок, желательно меньше кода. Было найдено идеальное решение для задачи и сейчас я им поделюсь.

И так, HTML код выглядит так:
<div id="items">
	<div class="item screen"><img src="1.jpg"></div>
	<div class="item"><img src="2.jpg"></div>
	<div class="item"><img src="3.jpg"></div>
	<div class="item"><img src="4.jpg"></div>
	<div class="item"><img src="5.jpg"></div>
</div>

В примере всего пять картинок, но добавить можно сколько необходимо:
	<div class="item"><img src="6.jpg"></div>
	<div class="item"><img src="7.jpg"></div>
	<!-- И так далее... -->

Далее, несколько строк стиля (CSS):
#items {
	position: relative;
}

.item {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 3s;
}

.screen {
	opacity: 1;
}

И конечно JavaScript:
var items = document.querySelectorAll('#items .item'), n = 0;

setInterval(function() {
	items[n].className = 'item';
	n = (n + 1) % items.length
	items[n].className = 'item screen';
}, 4500);

Вот, собственно и все.

Похожие темы