在Javascript中切换图像后出现未定义错误

Question

我正在尝试创建一个网站，中间有一张图片，该图片在给定时间后会发生变化。然而，在运行一次循环后，短时间内没有显示图片，我的控制台显示：

不久之后，它再次切换图像。但让图像暂时消失是不行的。

我的 Javascript 看起来像这样：

var allPictures = new Array();
var index = 0;
allPictures[0] = "imgA.jpg";
allPictures[1] = "imgB.jpg";
allPictures[2] = "imgC.jpg";

addEventListener("load",() => {
    setInterval( function() {
        changeImage()
    }, 500);
});

function changeImage() {
    document.getElementById("galleryPicture").src = allPictures[index];
    if (index < allPictures.length) {
        index += 1;
    } else if (index >= allPictures.length) {
        index = 0;
    }
}

我的 HTML 看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Website</title>
</head>
<body>

<script src="pictureSwapScript.js"></script>

<div class="galleryPicture">
<img id= "galleryPicture" src="imgA.jpg">
</div>
    
</body>
</html>

Answer 1

问题是用于递增

index

的条件，它会超出数组的边界。

替换为

    if (index >= allPictures.length - 1) {
        index = 0;
    } else {
        index += 1;
    }

还有其他一些微小的改进可以使您的代码受益，其中对我来说最明显的是替换：

    setInterval( function() {
        changeImage()
    }, 500);

仅

    setInterval(changeImage, 500);

Answer 2

下面的代码解决了您的用例。

function changeImage() {
  if (index < allPictures.length - 1) {
    index += 1;
  } else if (index >= allPictures.length - 1) {
    index = 0;
  }
  document.getElementById("galleryPicture").src = allPictures[index];
}

您试图将索引值与长度进行比较，索引总是从0开始。因此您必须将长度减少1，因为长度从1开始

在Javascript中切换图像后出现未定义错误

问题描述投票：0回答：2

2个回答

最新问题

在Javascript中切换图像后出现未定义错误

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2