在多个数组中旋转

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

问题出在这里：

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];

Answer 2

你的代码大部分都写得很好。这个问题就像@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 重新开始。

在多个数组中旋转

Rotating through multiple arrays

html

javascript

arrays

slideshow