如何使用 setTimeout/setInterval 显示显示不同时间的图像
我的目标是在开始时显示两张图像，每张图像持续 5 秒，然后来自不同文件夹的图像将每张显示 3 秒。我目前使用 set Interval 显示文件夹中的图像，并尝试使用 setTimeout 在开始时显示最初的两个图像。现在，当我运行此程序时，页面会显示页面顶部的 setInterval 代码以及fun-src下面的 setTimeout 块中的第二个图像 ( )。图像struc-src根本不显示。如何将这两个图像与其余图像对齐，并使它们仅出现 5 秒并在 5 秒后消失？我对 javascript 很陌生，所以我希望能得到任何关于如何实现这一目标的帮助。谢谢。
<!DOCTYPE html>
<html>
<section id="img-container"></section>
<img id="Scan" struc-src="img1.png" fun-src="img2.png"/>
<script type="text/javascript">
//my attempt to display the two pictures
var scans = document.getElementById("Scan");
var strucScan = scans.getAttribute("struc-src");
var funScan = scans.getAttribute("fun-src");
scans.src = structScan;
scans.style.display = "block";
setTimeout(() => {
scans.style.display = "none";
scans.src = funcScan;
scans.style.display = "block";
}, 5000);
//everything below this line works
const numOfPictures = 200;
const picturesNumberLength = 3;
let imageIndex = 1;
let imagesArray = [];
const imagesContainer = document.getElementById("img-container");
for (let i = 1; i < numOfPictures + 1; i++) {
const img = document.createElement("img");
img.src = `foldername/homeFolder_${(i+"").padStart(picturesNumberLength,"0")}.png`;
img.classList.add("slides");
img.style.width = "80%";
img.style.display = "none";
imagesContainer.appendChild(img);
imagesArray.push(img);
}
imagesArray[0].style.display = "block";
setInterval(() => {
imagesArray[imageIndex].style.display = "block";
if (imageIndex > 0) imagesArray[imageIndex-1].style.display = "none";
else imagesArray[numOfPictures-1].style.display = "none";
imageIndex++;
if (imageIndex >= numOfPictures) imageIndex = 0;
}, 3000);
</script>
</html>
白衣染霜花2回答
-
森栏
你只需要额外的暂停。0 秒：scans.src = structScan;5秒：scans.src = funScan;10秒：scans.style.display = "none"; imagesArray[0].style.display = "block";var scans = document.getElementById("Scan");var structScan = scans.getAttribute("struc-src");var funScan = scans.getAttribute("fun-src");scans.src = structScan;setTimeout(() => { scans.src = funScan;}, 5000);//everything below this line worksconst numOfPictures = 5;const picturesNumberLength = 3;let imageIndex = 1;let imagesArray = [];const imagesContainer = document.getElementById("img-container");for (let i = 1; i < numOfPictures + 1; i++) { const img = document.createElement("img"); img.src = `https://via.placeholder.com/150x150&text=home${(i+"").padStart(picturesNumberLength,"0")}.png`; img.classList.add("slides"); img.style.display = "none"; imagesContainer.appendChild(img); imagesArray.push(img);}setTimeout(() => { scans.style.display = "none"; imagesArray[0].style.display = "block"; setInterval(() => { imagesArray[imageIndex].style.display = "block"; if (imageIndex > 0) imagesArray[imageIndex-1].style.display = "none"; else imagesArray[numOfPictures-1].style.display = "none"; imageIndex++; if (imageIndex >= numOfPictures) imageIndex = 0; }, 3000); }, 10000);<section id="img-container"></section><img id="Scan" struc-src="https://via.placeholder.com/150x150&text=img1.png" fun-src="https://via.placeholder.com/150x150&text=img2.png"/> -
慕慕森
将 html 移到 script 标记之外。您应该 <img id="Scan" struc-src="img1.png" fun-src="img2.png"/>在上面的部分下方或内部添加。
随时随地看视频慕课网APP
相关分类
JavaScript