javascript - 完成后序列不重置

我正在尝试完成一个“幻灯片显示”功能，可以将其重用于不同的元素。我正在div上对其进行测试，该div包含来自我的HTML文档的段落文本，分别表示为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时，它保持显示：none;因此，该序列最终只能运行一次。

任何帮助表示赞赏。

最佳答案

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

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）。