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

Question

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

1

Я пытаюсь выполнить функцию "слайд-шоу", которую можно использовать повторно для разных элементов. Я тестирую его на 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";
}

После контейнера3 контейнер1 и контейнер2 устанавливаются для отображения: none; При прохождении контейнера3 и возвращении в контейнер1 остается отображение: none; Таким образом, последовательность в конечном счете работает только один раз.

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

Luke Isitt 23 окт. 2018, в 05:18

Источник

Теги:

javascript

arrays

frontend

2 ответа

1

Вам понадобится метод сброса счетчика current_view обратно до 0 когда вы достигли общего количества слайдов. Это можно сделать с помощью modulo или простого if conditional на .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";
}

Obsidian Age 23 окт. 2018, в 00:57

Ещё вопросы

Robby Cornelissen · Accepted Answer · 2018-10-22T23-38-00.000Z

Вам нужно использовать оператор modulo для повторного обхода в начало вашего массива:

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

Чтобы проиллюстрировать здесь таблицу прогрессирования значения current_view с оператором modulo и без него:

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

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

Это сработало - быстро и легко. Спасибо за помощь. Я отмечу ваш ответ правильно, как только время восстановления истекло :-)