2

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>

https://jsfiddle.net/wb5yn1pu/

2
  • Если у вас сейчас pointer = 0 и увеличивается, то для обратного порядка надо pointer = length - 1 и уменьшать, или нет?
    – teran
    Commented 27 февр. 2017 в 15:52
  • Не получается..
    – Artem
    Commented 27 февр. 2017 в 16:05

1 ответ 1

2
if(pointer == 0)
    pointer = blocks.length - 1;
  else
    pointer--;
1
  • Большое спасибо
    – Artem
    Commented 27 февр. 2017 в 16:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.