javascript - 完成后序列不重置

Question

我正在尝试完成一个可以重复用于不同元素的“幻灯片”功能。我在一个包含来 self 的 HTML 文档的段落文本的 div 上测试它，表示为 container1、container2 和 container3。在按钮上的 onclick=""上调用 Clicky()。

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设置为display:none；通过container3，返回container1时，依然是display:none；所以这个序列最终只工作一次。

感谢任何帮助。

Answer 1

您需要使用模运算符再次环绕到数组的开头:

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

如果没有模数，一旦 current_view 达到 3，您就会超出数组边界 (OOB)。