Форум

TheSanches · #1 (**permalink**) 07.08.2018, 12:33

Доброго времени суток, делаю слайдер работающий по клику, логика реализована на удалении и присвоении классов к картинкам, но классы присваиваются сразу двум картинкам, а нужно чтобы присваивались по очереди после каждого клика, я так понимаю что нужно выйти из цикла, но не могу реализовать работающий код, подскажите как это правильно сделать.

<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');
	});
}

Nexus · #2 (**permalink**) 07.08.2018, 12:46

Вообще всегда наоборот делают, т.е. присваивают класс тому элементу, который нужно показать, у вас наоборот.

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);
    };
})();

рони · #3 (**permalink**) 07.08.2018, 14:08

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 · #4 (**permalink**) 07.08.2018, 15:36

Спасибо

рони · #5 (**permalink**) 07.08.2018, 16:44

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>

Форум

Справочник

Discord чат

Курсы javascript