0

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

5
  • 3
    Что вы сделали сами, чтобы реализовать это?
    – Visman
    8 дек 2017 в 7:34
  • Не могу отметить дубликатом вопрос, так, что вот ответ
    – Air
    8 дек 2017 в 7:47
  • @Air есть такая штучка, как "тревога", в которой можно указать причину 13 дек 2017 в 7:43
  • @АлексейШиманский, ну ты как думаешь, я не знаю существовании кнопки "тревога"? Щас не скажу точно, но когда хотел вопрос отметить тревогой, система не отреагировала на ссылку которую я вложил, было сообщение, дай бог памяти, что мол вопрос не отмечен плюсами и ответы тоже... и вроде я так понял, что вопрос не возможно отметить как дубликат... Кстати хотел этот вопрос на мете поднять, но ни как времени не нашел...
    – Air
    13 дек 2017 в 19:38
  • @АлексейШиманский, вот щас в голосовании, я смог его отметить как дубликат, а тогда не мог ссылаться на тот вопрос...
    – Air
    13 дек 2017 в 19:44

1 ответ 1

3

Тут четыре блока, еще один думаю сам добавишь...

var btn = document.querySelectorAll('p'),
  three = document.querySelectorAll('.three')[0];

var count = 0;

var runSlide = startSlide(1000);


for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    clearInterval(runSlide);
    three.className = 'three';
    three.classList.add('three-' + i);
    count = i;
    setTimeout(function() {
      runSlide = startSlide(1000)
    }, 1000)
  });
}

function startSlide(time) {
  return setInterval(function() {
    if (count == btn.length) {
      count = 0;
    }
    three.className = 'three';
    three.classList.add('three-' + count);
    count++;
  }, time || 1000);

}
* {
  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: flex;
  flex-direction: column;
  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 style="margin-top: 5px; cursor: pointer; background: #cd1; text-align: center;">1</p>
    <p style="margin-top: 5px; cursor: pointer; background: #1cd; text-align: center;">2</p>
    <p style="margin-top: 5px; cursor: pointer; background: #11d; text-align: center;">3</p>
    <p 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>

10
  • Спасибо , то что нужно , а как можно сделать что бы блоки сами переключались ? вроде через setTimeout можно реализовать ?
    – Vitaly
    8 дек 2017 в 7:58
  • да setTimeout...
    – Air
    8 дек 2017 в 8:00
  • а не подскажите что передавать в качестве функции для setTimeout? как я понял нужно сделать еще один цикл и передавать уже в него setTimeout ? И что будет когда цикл дойдет до конца ? можно ли сделать что то на подобие цикла while и например когда i будет подходить к концу обнулять ее что бы невозможно было выйти из данного цикла ? Извините если сильно тупой вопрос , просто js совсем недавно начал изучать
    – Vitaly
    8 дек 2017 в 15:20
  • 1
    глянь, пример я изменил... прости, я тя обманул, моя невнимательность)))... не setTimeout, а setInterval, setTimeout запускает один раз после определенного времени, а setInterval каждые и сколько выставишь время
    – Air
    8 дек 2017 в 21:51
  • 1
    Я только код на событии click оставил тем , который был , а то после нажатия на кнопки там какая то карусель из слайдов начиналась
    – Vitaly
    9 дек 2017 в 6:16

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