如何使用变量来确定JavaScript中的显示源?

Question

我刚开始使用JavaScript，我不知道如何根据不断变化的变量进行图像更改(我想使用相对文件位置)。我看了一个教程，但是图片取代了标签页，而不是它的一部分。

这是我目前的进度:

<div class="Box">
//Irrelevant sibling div
<img name="slide" class="slide" />
</div>
<script>
var i = 0;
var images = [];
var time = 3000;
//Below is where I think the problem is
images[0] = window.location = "./Images/img1.jpg";
images[1] = window.location = "./Images/img2.jpg";
images[2] = window.location = "./Images/img3.jpg";
images[3] = window.location = "./Images/img4.jpg";
images[4] = window.location = "./Images/img5.jpg";
//Above is where I think the problem is
function changeImg() {
document.slide.src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changeImg, time);
}
window.onload = changeImg;
</script>

我已经尝试使用window.location.href，但它有一个相同的结果，我目前有。

Answer 1

您肯定不希望将窗口位置设置为图像本身。把它删掉:

images[0] = "./Images/img1.jpg";
images[1] = "./Images/img2.jpg";
images[2] = "./Images/img3.jpg";
images[3] = "./Images/img4.jpg";
images[4] = "./Images/img5.jpg";

你也可以简化你的代码:

var i = 0;
var images = [];
var time = 3000;
function changeImg() {
document.slide.src = `./Images/img${++i}.jpg`;
i = i % 5;
setTimeout(changeImg, time);
}
window.onload = changeImg;

Answer 2

首先，我将假设您有一个图像标记，其ID为slide，如

<image id="slide"></image>

在你的代码中，我不明白你想用 上的双等号做什么

images[0] = window.location = "./Images/img1.jpg";
images[1] = window.location = "./Images/img2.jpg";
images[2] = window.location = "./Images/img3.jpg";
images[3] = window.location = "./Images/img4.jpg";
images[4] = window.location = "./Images/img5.jpg";

请记住，window.location是一个对象，它将跳转到该位置(这是一个页面加载)，重新加载后，它将不再运行脚本

我要改成简单的

images[0] = "./Images/img1.jpg";
images[1] = "./Images/img2.jpg";
images[2] = "./Images/img3.jpg";
images[3] = "./Images/img4.jpg";
images[4] = "./Images/img5.jpg";

现在，唯一的地方你需要一个小的改变，因为HTML节点与javascript的工作方式是行，你调用document.slide.src = images[i];

应该是

document.getElementById("slide").src = images[i];

，你会看到一切正常

对于你的例子，你可以做得更好/重构，但从你的问题来看，这是两个主要的变化:)

---

下面是一个基于你的代码的简单示例

var i = 0;
var images = [];
var time = 3000;
//Below is where I think the problem is
images[0] = "https://via.placeholder.com/150?text=image 1";
images[1] = "https://via.placeholder.com/150?text=image 2";
images[2] = "https://via.placeholder.com/150?text=image 3";
images[3] = "https://via.placeholder.com/150?text=image 4";
images[4] = "https://via.placeholder.com/150?text=image 5";
//Above is where I think the problem is
function changeImg() {
document.getElementById("slide").src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changeImg, time);
}
window.onload = changeImg;

<image id="slide"></image>