如何使用 setTimeout/setInterval 显示不同时间显示的图像

Question

我的目标是在开始时显示两张图像，每张持续 5 秒，然后来自不同文件夹的图像每张显示 3 秒。我目前使用 set Interval 显示文件夹中的图像，并尝试使用 setTimeout 在开始时显示最初的两个图像。现在，当我运行这个时，页面显示我在页面顶部的 setInterval 代码和下面我的 setTimeout 块中的第二个图像 (fun-src)。 struc-src 图像根本不显示。如何将这两个图像与其余图像对齐并使它们只出现 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>

Answer 1

将 html 移到脚本标记之外。你应该添加 <img id="Scan" struc-src="img1.png" fun-src="img2.png"/> 在您上面的部分之下或之内。

Answer 2

你只需要一个额外的超时。

0s: 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"/>

如何使用 setTimeout/setInterval 显示不同时间显示的图像

How can I display images that display for different times using setTimeout/setInterval

html

javascript

image

settimeout

setinterval