Авто переключение блоков js

295

10 декабря 2017, 10:30

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

    var btn = document.querySelectorAll('#p1'), 
    	three = document.querySelectorAll('.three')[0]; 
    	for (let i = 0; i < btn.length; i++) { 
    		btn[i].addEventListener('click',function() { 
    			three.className = 'three'; 
    			three.classList.add('three-' + i); 
    		}) 
    	}

    { 
      margin: 0; 
      padding: 0; 
    } 
     
    html, 
    body { 
      width: 100%; 
      height: 100%; 
      background: #272727; 
      box-sizing: border-box; 
      color: white; 
    } 
     
    .one { 
      width: 400px; 
      height: 100px; 
      background: green; 
      display: flex; 
      flex-direction: row; 
      overflow: hidden; 
    } 
     
    .two { 
      display: inline-block; 
      align-content: space-between; 
      width: 50px; 
      height: 100px; 
      background: #272727; 
      z-index: 5; 
    } 
     
    .three { 
      display: flex; 
      flex-wrap: nowrap; 
      flex-direction: row; 
      width: 350px; 
      height: 100px; 
      background: red; 
      transition: transform .3s; 
      transform: translateX(0); 
    } 
     
    .three-0 { 
      transition: transform .3s; 
      transform: translateX(0); 
    } 
     
    .three-1 { 
      transition: transform .3s; 
      transform: translateX(-350px); 
    } 
     
    .three-2 { 
      transition: transform .3s; 
      transform: translateX(-700px); 
    } 
     
    .three-3 { 
      transition: transform .3s; 
      transform: translateX(-1050px); 
    } 
     
    .four { 
      min-width: 350px; 
    }

<div class="one"> 
		<div class="two"> 
			<p id="p1" style="margin-top: 5px; cursor: pointer; background: #cd1; text-align: center;">1</p> 
			<p id="p1" style="margin-top: 5px; cursor: pointer; background: #1cd; text-align: center;">2</p> 
			<p id="p1" style="margin-top: 5px; cursor: pointer; background: #11d; text-align: center;">3</p> 
			<p id="p1" style="margin-top: 5px; cursor: pointer; background: #d0e; text-align: center;">4</p> 
		</div> 
		<div class="three three-0"> 
			<div class="four" style="background: #cd1; text-align: center;">11</div> 
			<div class="four" style="background: #1cd; text-align: center;">22</div> 
			<div class="four" style="background: #11d; text-align: center;">33</div> 
			<div class="four" style="background: #d0e; text-align: center;">44</div> 
		</div> 
</div>

Если взять уже имеющийся цикл и добавить setTimeout то происходит задержка на определенное время и переключения с первого на последний блок сразу (всего их 4)

for (let i = 0; i < btn.length; i++) {
        (setTimeout( function() {
            three.className = 'three';
            three.classList.add('three-' + i);
        },1000))
    }

Answer 1

Я бы такие элементы списком сделал,как сделать пример ниже,думаю будет понятно:

html:

<ul>
  <li class="active">1 блок</li>
  <li>2 блок</li>
  <li>3 блок</li>
</ul>
<style>
  .active {
    color: red;
  }
</style>

js:

var ul = document.querySelector("ul");
var li = ul.querySelectorAll("li");
ul.addEventListener('click', function(evt){
    li.forEach(function(item) {
        item.classList.toggle('active',false);
    });
    evt.target.classList.toggle('active');
});
setInterval(function() {
        for(var i = 0; i < li.length; i++){
            if(li[i].classList.contains('active')){
                li[i].classList.remove('active');
                if(i+1 < li.length) {
                    li[++i].classList.add('active'); return;
                }
                else {
                    li[0].classList.add('active');
                    return;
                }
            }
        }
}, 2000);