时间戳

首页 > 解决方案 > 如何使用 setTimeout/setInterval 显示显示不同时间的图像

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

问题描述

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

标签： javascripthtmlimagesettimeoutsetinterval

解决方案

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

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"/>

推荐阅读