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