JQuery. Показывать и скрывать блоки по кругу

#javascript #html #jquery #циклы

У меня есть 6 блоков div. Изначально они скрыты. Нужно показать первый div, через
секунду второй, потом третий и т.д.

Задача в том, чтобы показывать length-1 (на один меньше общего количества) элементов
и при появлении пятого (предпоследнего) первый скрывать, а после появления шестого
снова показывается первый, потом второй и так далее по бесконечному кругу:



jQuery(document).ready(function() {

    var delay = 0,
        notes = $('.b-notification');

    notes.each(function() {
        var note = $(this);

        setInterval(function() {
            note.addClass('show');
        }, delay+=1000);
    });


});
.b-notification {
  display: none;
}

.b-notification.show {
  display: block;
}

1
2
3
4
5
6




https://codepen.io/astrolavrov/pen/XWWxOqX

На кодпене смог сделать добавление класса .show с периодом в одну секунду. Но не
получается зациклить этот код.
    

Ответы

Ответ 1

jQuery(document).ready(function() {
  var index = 0, maxShow = 4,
    notes = $('.b-notification');

  setInterval(function() {
    var note = notes.eq(index);
    note.addClass('show');
    if (notes.filter('.show').length > maxShow) {
      note.parent().append(note);
      $('.b-notification.show').eq(0).removeClass('show');
    }
    index = ++index % notes.length;
  }, 1000);
});
.b-notification {
  display: none;
}

.b-notification.show {
  display: block;
}

1
2
3
4
5
6