18:51 16.08.2018
Сегодня для одного проекта потребовался простой слайдер картинок, желательно меньше кода. Было найдено идеальное решение для задачи и сейчас я им поделюсь.
И так, HTML код выглядит так:
В примере всего пять картинок, но добавить можно сколько необходимо:
Далее, несколько строк стиля (CSS):
И конечно 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);
Вот, собственно и все.
- Жалоба