2

Суть такая. Просто жму на кнопку "next", запускается цикл, цикл перебирает элементы. Если находит элемент с z-index равным 10, то у самого элемента меняет его на 0, а у следующего за ним ставит z-index равным 10. То есть просто банальная переключалка друг за другом. Но почему не получается по кругу, то есть когда доходит до последнего элемента (и если у него z - index равен 10) то у себя ставит 1, а у первого 10) что бы заново запустить круг. Мой код работает до последнего а дальше ошибка, подскажите почему?

var slider = document.querySelectorAll("article");
  var count = slider.length - 1;
  
  
  function next(){
    for(var i = 0; i < slider.length; i++){
      if(slider[i].style.zIndex === "10"){
        slider[i].style.zIndex = 1;
        slider[i + 1].style.zIndex = 10;
        setTimeout(function(){
          slider[i].style.zIndex = 0;
        }, 1000);
        break;
      }else if(slider[i].style.zIndex === "10" && i === count){
        slider[i].style.zIndex = 1;
        slider[0].style.zIndex = 10;
        setTimeout(function(){
          slider[i].style.zIndex = 0;
        }, 1000);
        break;
      }

  }
}
<div style="margin: 10px auto; width:1216px; height: 400px; text-align: center;">
  <div style="width: 960px; display: inline-block; height: 400px; position: relative;">
    <article style="width:960px; height: 400px; position: absolute; background-color: red; z-index: 10;"></article>
    <article style="width:960px; height: 400px;  position: absolute; background-color: green;   z-index: 0;"></article>
    <article style="width:960px; height: 400px; position: absolute; background-color: blue;   z-index: 0;"></article>
    <article style="width:960px; height: 400px; position: absolute; background-color: black;   z-index: 0;"></article>
    <article style="width:960px; height: 400px; position: absolute; background-color: orange; z-index: 0;"></article>
    <div onclick="next()" style="left:1000px; position: absolute; top: 180px; background-color: red; height: 68px; width: 68px;">Next</div>
  </div>
</div>

3
  • Какая ошибка? в консоле? или где? Commented 26 дек. 2017 в 18:26
  • Вы хотите что бы после одного клика он перебирал бесконечно раз по циклу элементы по кругу, или что бы после клика next он брал один следующий элемент и выводил его вперёд? Commented 26 дек. 2017 в 18:30
  • Вы хотите что бы после одного клика он перебирал бесконечно раз по циклу элементы по кругу
    – Sinevik
    Commented 26 дек. 2017 в 18:35

2 ответа 2

3

Сделай проще:

  1. Выбери все элементы, которые нужно переключать (например в переменную list);
  2. Объяви переменную index = 0;
  3. Выбирай элементы по кругу так list[index++ % list.length].
6
  • Да, я знаю что так можно. Мне просто интересно почему это не работает?
    – Sinevik
    Commented 26 дек. 2017 в 18:35
  • Очень странный алгоритм у вас описан. Я так понимаю в else if он никогда не попадает
    – vihtor
    Commented 26 дек. 2017 в 18:44
  • А что странного? Если у последнего элемента цикла z - index 10, то оно первый элемент изменяет
    – Sinevik
    Commented 26 дек. 2017 в 18:45
  • Странно то, что и в if и в else ifу вас проверяется одно и тоже условие: если zIndex === 10. Ну и если хоть последний, хоть не последний элемент будет с zIndex равным 10, он попадет в if
    – vihtor
    Commented 26 дек. 2017 в 18:49
  • Плюс ко всему чувствуется не понимаение того как работают таймеры
    – vihtor
    Commented 26 дек. 2017 в 18:49
1

Ваш код вообще ничего не перебирает по циклу, потому что

 for(var i = 0; i < slider.length; i++){
 {
     //...
    setTimeout(function(){
          slider[i].style.zIndex = 0;
        }, 1000);

Внутри setTimeout он будет i брать не тот который вы указываете, а всегда сразу последний, потому что он берёт текущий i а текущий через секунду после запуска цикла станет последним по итерации.

Вам надо использовать for(let i = 0; i < slider.length; i++)

Почитать отличие let и var тут.

Кроме того у вас все таймеры одновременно срабатывают почти, то есть заведомо делают не то что вы хотите. Смотрите он моментально проходит весь цикл за наносекунды, и сразу вешает все таймеры на секунду, проходит секунда и все таймеры сразу срабатывают.

Для правильной работы вам нужно сделать отдельно функцию MoveNext() и всю её вызывать по setInterval.

Ваш ответ

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

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