Работа с массивом
Доброго времени суток, делаю слайдер работающий по клику, логика реализована на удалении и присвоении классов к картинкам, но классы присваиваются сразу двум картинкам, а нужно чтобы присваивались по очереди после каждого клика, я так понимаю что нужно выйти из цикла, но не могу реализовать работающий код, подскажите как это правильно сделать.
<img class='header__bg' src="img/background.jpg"> <img class='header__bg header__bg_show' src="img/background2.jpg"> <img class='header__bg header__bg_show' src="img/background3.jpg"> <!-- header__bg_show opacity :0; -->
document.querySelector('.header__btn-left').addEventListener('click', sliderLeft);
let headerBg = document.querySelectorAll('.header__bg');
function sliderLeft(){
headerBg.forEach(function(item){
item.classList.contains('header__bg_show') == true ?
item.classList.remove('header__bg_show') :
item.classList.add('header__bg_show');
});
}
|
Вообще всегда наоборот делают, т.е. присваивают класс тому элементу, который нужно показать, у вас наоборот.
document.querySelector('.header__btn-left').addEventListener('click', sliderLeft);
const sliderLeft = (function() {
const nodeCollection = document.querySelectorAll('.header__bg');
const className = 'header__bg_show';
return function() {
let index = false;
nodeCollection.forEach(function(node, i) {
if (index === false && !node.classList.contains(className))
index = i;
node.classList.add(className);
});
const node = !!nodeCollection[++index] ? nodeCollection[index] : nodeCollection[0];
node.classList.remove(className);
};
})();
|
:-?
document.querySelector('.header__btn-left').addEventListener('click', sliderLeft);
let headerBg = document.querySelectorAll('.header__bg');
let idx = 0;
function sliderLeft(){
headerBg[idx].classList.remove('header__bg_show');
++idx;
if(idx == headerBg.length) idx = 0;
headerBg[idx].classList.add('header__bg_show');
}
|
Спасибо
|
TheSanches,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
position: relative;
}
.header__bg{
opacity: 0;
transition: 1s;
display: block;
position: absolute;
}
.header__bg_show{
opacity: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.header__btn-left').addEventListener('click', sliderLeft);
let headerBg = document.querySelectorAll('.header__bg');
let idx = 0;
function sliderLeft(){
headerBg[idx].classList.remove('header__bg_show');
++idx;
if(idx == headerBg.length) idx = 0;
headerBg[idx].classList.add('header__bg_show');
}
});
</script>
</head>
<body><input name="" type="button" value="next" class="header__btn-left">
<img class='header__bg header__bg_show' src="http://placeimg.com/400/200/people?r=1">
<img class='header__bg' src="http://placeimg.com/400/200/people?r=2">
<img class='header__bg' src="http://placeimg.com/400/200/people?r=3">
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:32. |