我的目標(biāo)是在開始時顯示兩張圖像，每張圖像持續(xù) 5 秒，然后來自不同文件夾的圖像將每張顯示 3 秒。我目前使用 set Interval 顯示文件夾中的圖像，并嘗試使用 setTimeout 在開始時顯示最初的兩個圖像?，F(xiàn)在，當(dāng)我運行此程序時，頁面會顯示頁面頂部的 setInterval 代碼以及fun-src下面的 setTimeout 塊中的第二個圖像 ( )。圖像struc-src根本不顯示。如何將這兩個圖像與其余圖像對齊，并使它們僅出現(xiàn) 5 秒并在 5 秒后消失？我對 javascript 很陌生，所以我希望能得到任何關(guān)于如何實現(xiàn)這一目標(biāo)的幫助。謝謝。<!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>
如何使用 setTimeout/setInterval 顯示顯示不同時間的圖像
白衣染霜花
2023-07-06 19:51:17
