在多个数组中旋转

Question

我正在尝试使用以下 javascript 代码制作一个简单的幻灯片，但它不适合我。我对拼写进行了三次检查，确保所有元素都与我的 HTML 相关。

Javascript：

var pic_rotation = ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
    cap_rotation = ["caption 1", "caption 2", "caption 3"];
var int = 0;

function rotatePicCap(){
    if (int < pic_rotation.length){
        int++;
    }
    else if (int == pic_rotation.length){
        int = 0;
    }
    document.getElementById("pic").src = pic_rotation[int];
    document.getElementById("cap").innerHTML = pic_rotation[int];
}

setInterval(function slideShow(){rotatePicCap()}, 4000);

HTML：

<div id="slideshow">
    <img src="pic1.jpg" alt="Picture" id="pic">
    <div id="cap">caption 1</div>
</div>

对为什么这不起作用有什么想法吗？

Answer 1

您的代码大部分情况下都很好。这个问题就像@CertainPerformance 所说的那样（if 语句）。

在显示您的信息之前，您正在检查并增加int。因此，在 int 为 0 的开头，您首先显示 pic2，因为 int 在显示之前递增到 1。您的 if 语句正确检查 int 是否小于长度，然后您在显示之前将其递增。

进行以下更改就可以了：

function rotatePicCap(){
    if (int == pic_rotation.length){
        int = 0;
    }
    document.getElementById("pic").src = pic_rotation[int];
    document.getElementById("cap").innerHTML = pic_rotation[int];
    int++;
}

这仍会增加，但您将在之前进行检查。如果int 更大，则在 0 处重新开始。

Answer 2

问题出在这里：

if (int < pic_rotation.length) int++;

查看您的浏览器控制台 - 它会告诉您问题所在。在最后一次迭代中，int 将与数组的长度相同。但是对于长度为 3 的数组，arr[3] 是未定义的。

最好使用模数：

function rotatePicCap(){
  int = (int + 1) % pic_rotation.length;

另外一件事 - 仅当您有意使用或插入 HTML 标记（可能存在安全和编码问题）时才使用 innerHTML。当您设置或检索文本值时，请改用textContent。

document.getElementById("cap").textContent = pic_rotation[int];