我的目标是在开始时显示两张图像，每张图像持续 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 回答
森栏
TA贡献1810条经验 获得超5个赞
你只需要额外的暂停。
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 works
const 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"/>
慕慕森
TA贡献1856条经验 获得超17个赞
将 html 移到 script 标记之外。您应该 <img id="Scan" struc-src="img1.png" fun-src="img2.png"/>在上面的部分下方或内部添加。
添加回答
举报
0/150
提交
取消