Последовательность не сбрасывается после завершения

Question

Я пытаюсь выполнить функцию «слайд-шоу», которую можно использовать для разных элементов.Я тестирую его на элементе div, содержащем текст абзаца из моего HTML-документа, представленного в виде container1, container2 и container3 .Clicky () вызывается onclick = "" для кнопки.

let slideshow_divs = ["container1", "container2", "container3"];
    for(let i = 1; i < slideshow_divs.length; i++) {
    document.getElementById(slideshow_divs[i]).style.display = "none";
}

let current_view = 0

function clicky() {
    document.getElementById(slideshow_divs[current_view]).style.display = "none";

    current_view = current_view + 1
    document.getElementById(slideshow_divs[current_view]).style.display = "block";
}

После того, как container3, container1 и container2 настроены на отображение: нет;При прохождении container3 и возвращении в container1 он остается отображаемым: нет;Таким образом, последовательность в конечном итоге работает только один раз.

Любая помощь приветствуется.

Answer 1

Вам понадобится метод для сброса обратного отсчета current_view до 0, когда вы достигнете общего количества слайдов.Это можно сделать с помощью модуля или простого if, условного для .length из slideshow_divs:

let slideshow_divs = ["container1", "container2", "container3"];
    for(let i = 1; i < slideshow_divs.length; i++) {
    document.getElementById(slideshow_divs[i]).style.display = "none";
}

let current_view = 0;

function clicky() {
    document.getElementById(slideshow_divs[current_view]).style.display = "none";

    if (current_view < slideshow_divs.length) {
        current_view = current_view + 1;
    } else {
        current_view = 0;
    }

    document.getElementById(slideshow_divs[current_view]).style.display = "block";
}

Answer 2

Вам нужно использовать оператор по модулю, чтобы снова обернуть начало массива:

current_view = (current_view + 1) % slideshow_divs.length;

Для иллюстрации, вот таблица прогрессии значения current_view с модулем и без него.оператор:

Without modulo          With modulo
--------------          -----------
      0                      0
      1                      1
      2                      2
      3 (OOB)                0
      4 (OOB)                1
      5 (OOB)                2

Без модуля вы выйдете за пределы массива (OOB), как только current_view попадет 3.