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

【问题标题】：How can I display images that display for different times using setTimeout/setInterval如何使用 setTimeout/setInterval 显示显示不同时间的图像
【发布时间】：2020-11-02 19:14:10
【问题描述】：

我的目标是在开始时显示两个图像，每个图像持续 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>

【问题讨论】：

运行此代码时，打开开发者工具控制台并查找错误（在大多数浏览器中按 F12 会打开开发者工具）。
将 html 行移到脚本标签上方后，我没有收到任何错误，现在带有 setTimeout 部分和 setInterval 部分的图像分别显示在彼此下方和上方。如果您对如何一个接一个地展示它们有任何想法，我将不胜感激
你的 setTimeouts 在同一时间运行
我更改了它，以便我只有一个用于 fun-src 图像的 setTimeout。现在 struc-src 图像显示，但 fun-src 图像没有离开。这两个图像也不会在图像形成 setInterval 之前显示 - 它们都同时显示。如何让 setInterval 图像在前两个图像显示后出现？
我认为您需要更清楚地描述这些状态。即，您希望在 1 秒时看到什么？ 6秒标记？每 3 秒间隔，等等？图像会消失吗？如果有，是哪些？

标签： javascript html image settimeout setinterval

【解决方案1】：

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

0s：scans.src = structScan;

5s：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"/>

【讨论】：

【解决方案2】：

将 html 移出 script 标签。你应该添加 <img id="Scan" struc-src="img1.png" fun-src="img2.png"/> 在您上方的部分下方或内部。

【讨论】：

当我这样做时，我想显示 5 秒的图像不会出现，只是我正在使用 setInterval 实现的图像。我的 setTimeout 部分有什么问题吗？
实际上，fun-src 指定的图像显示在 setInterval 的图像下方，并且在 5 秒后并没有消失。 struc-src 图像根本不显示。有没有办法可以将这两个图像与 setInterval 中的图像对齐？