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]未定义。

最好使用modulo：

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。

旋转通过多个阵列

2 个答案: