let button = document.querySelector('.btn'),
blocks = Array.from(document.querySelectorAll('.block')),
pointer = 0;
button.addEventListener('click', function() {
// Убираем прошлый блок
blocks[pointer].classList.remove('active');
if (pointer + 1 >= blocks.length)
pointer = 0;
else
pointer++;
// Отмечаем новый блок
blocks[pointer].classList.add('active');
});
.main{
width: 100%;
height: 800px;
background-color: grey;
overflow: hidden;
}
.block{
width: 500px;
height: 500px;
display: none;
margin: 100px auto;
}
.red{
background-color: red;
}
.black{
background-color: black;
}
.green{
background-color: green;
}
.active{
display: block;
}
<button class="btn">button</button>
<div class="main">
<div class="block red active"></div>
<div class="block black"></div>
<div class="block green"></div>
</div>
pointer = 0
и увеличивается, то для обратного порядка надоpointer = length - 1
и уменьшать, или нет?