我正在尝试使用 JavaScript 制作一个简单的幻灯片。
这是我的index.html
<body>
<h1>Slideshow example</h1>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"></script>
</body>
这是slide.js
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
timer: function() {
this.sliderImages.forEach(function(img) {
var container = document.getElementById('container');
var image = document.createElement('img');
container.appendChild(image);
image.src= img;
})
}
}
如果我单击“下一张幻灯片”按钮，我会看到两张图像。它循环遍历整个数组。单击按钮时，如何使其仅循环数组一次？
我尝试添加container.innerHTML = '';这样在添加下一个图像时会删除上一个图像，但这会导致它立即显示 sliderImages[1] 中的图像。我对这整件事的处理方式是错误的吗？
最佳答案
我更新了你的代码。这不是最好的编写方式，但我只是修改了您的示例来向您展示问题。问题是你的计时器函数只是一次遍历数组中的所有元素。相反，您可能想要做的是添加一些延迟。
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
currentImgIndex: 0,
timer: function() {
if (this.currentImgIndex < this.sliderImages.length ) {
var image = document.getElementById('img');
image.src= this.sliderImages[this.currentImgIndex];
this.currentImgIndex++;
setTimeout(function (){ slideshow.timer()}, 2000)
} else {
alert("no more images");
}
}
}<body>
<h1>Slideshow example</h1>
<img id="img"/>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"> </script>
</body>关于javascript - 如何用JS制作一个简单的幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39565806/