我正在嘗試創建一個中間有一張圖片的網站，該圖片在給定時間后會發生變化。但是，在回圈運行一次后，短時間內沒有顯示圖片，我的控制臺顯示：
不久之后，它再次切換影像。但是讓影像暫時消失是不行的。
我的 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>
uj5u.com熱心網友回復：
問題是用于 increment 的條件index，它將超出陣列的邊界。
將其替換為
if (index >= allPictures.length - 1) {
index = 0;
} else {
index = 1;
}
還有其他一些細微的改進可以使您的代碼受益，其中對我來說最明顯的是替換：
setInterval( function() {
changeImage()
}, 500);
只是
setInterval(changeImage, 500);
uj5u.com熱心網友回復：
下面的代碼解決了您的用例。
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 開始
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/361880.html
標籤：javascript html