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

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

javascript html image

Javascript 如何使用setTimeout/setInterval显示不同时间显示的图像,javascript,html,image,settimeout,setinterval,Javascript,Html,Image,Settimeout,Setinterval,我的目标是在开始时显示两个图像，每个图像持续5秒，然后来自不同文件夹的图像将分别显示3秒。我目前使用set Interval显示文件夹中的图像，并尝试在开始时使用setTimeout显示最初的两个图像。现在，当我运行这个程序时，页面在页面顶部显示了我的setInterval代码，以及下面我的setTimeout块中的第二个图像（fun src）。struc src图像根本不显示。如何将这两个图像与其余图像对齐，使它们仅出现5秒钟，然后消失？我是javascript新手，因此我非常感谢您对如何实现

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


//我尝试显示这两张图片
var scans=document.getElementById（“Scan”）；
var strucScan=scans.getAttribute（“struc src”）；
var funScan=scans.getAttribute（“fun src”）；
scans.src=structScan；
scans.style.display=“block”；
设置超时（（）=>{
scans.style.display=“无”；
scans.src=funcScan；
scans.style.display=“block”；
}, 5000);
//这条线以下的一切都有效
常数numOfPictures=200；
常量图片numberlength=3；
设imageIndex=1；
让imagesArray=[]；
const imagesContainer=document.getElementById（“img容器”）；
for（设i=1；i{
imagesArray[imageIndex].style.display=“block”；
如果（imageIndex>0）imagesArray[imageIndex-1].style.display=“无”；
else imagesArray[numOfPictures-1].style.display=“无”；
imageIndex++；
如果（imageIndex>=numOfPictures）imageIndex=0；
}, 3000);

将html移到脚本标记之外。你应该加上

在上面的部分下方或内部。

将html移到脚本标记之外。你应该加上

在上面部分的下方或内部。

您只需要额外的超时时间

0s:

scans.src=structScan
5s:scans.src=funScan
10s:scans.style.display=“无”；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；
设置超时（（）=>{
scans.src=funScan；
}, 5000);
//这条线以下的一切都有效
常数numOfPictures=5；
常量图片numberlength=3；
设imageIndex=1；
让imagesArray=[]；
const imagesContainer=document.getElementById（“img容器”）；
for（设i=1；i{
scans.style.display=“无”；
imagesArray[0].style.display=“block”；
设置间隔（（）=>{
imagesArray[imageIndex].style.display=“block”；
如果（imageIndex>0）imagesArray[imageIndex-1].style.display=“无”；
else imagesArray[numOfPictures-1].style.display=“无”；
imageIndex++；
如果（imageIndex>=numOfPictures）imageIndex=0；
}, 3000);
}, 10000);
您只需要额外的超时时间
0s:scans.src=structScan
5s:scans.src=funScan
10s:scans.style.display=“无”；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；
设置超时（（）=>{
scans.src=funScan；
}, 5000);
//这条线以下的一切都有效
常数numOfPictures=5；
常量图片numberlength=3；
设imageIndex=1；
让imagesArray=[]；
const imagesContainer=document.getElementById（“img容器”）；
for（设i=1；i{
scans.style.display=“无”；
imagesArray[0].style.display=“block”；
设置间隔（（）=>{
imagesArray[imageIndex].style.display=“block”；
如果（imageIndex>0）imagesArray[imageIndex-1].style.display=“无”；
else imagesArray[numOfPictures-1].style.display=“无”；
imageIndex++；
如果（imageIndex>=numOfPictures）imageIndex=0；
}, 3000);
}, 10000);

运行此代码时，打开开发人员工具控制台并查找错误（按F12可在大多数浏览器中打开开发人员工具）。将html行移到脚本标记上方后，我没有发现任何错误，现在带有setTimeout部分和setInterval部分的图像分别显示在彼此的下方和上方。如果您对如何一个接一个地显示它们有任何想法，我会很感激您的设置超时正好在我更改它的同时运行，这样我就只有一个有趣的src图像的设置超时。现在strucsrc图像显示，但有趣的src图像没有离开。这两幅图像也不会显示在ima之前