Javascript 在数组中使用setTimeout和for循环显示图像

我需要在我的页面中显示图像<代码>时间是图像应显示在页面上的时间。例如：

第一张照片car_0.png将在页面上显示3秒钟。3秒后，它会变为第二个图像，显示0.5秒

我已编写此方法，但不起作用：

images: [
    {
        img: 'car_0.png',
        time: 3000,
    },
    {
        img: 'car_1.png',
        time: 500,
    },
    {
        img: 'car_2.png',
        time: 500,
    },
    {
        img: 'car_3.png',
        time: 1000,
    },
],

---

但仍不能正常工作，第一张图片应立即出现并显示3秒钟。现在在3秒后出现

使用承诺函数执行类似操作：

const图像=[{
img:'https://picsum.photos/id/0/100',
时间：3000，
},
{
img:'https://picsum.photos/id/10/100',
时间:500,，
},
{
img:'https://picsum.photos/id/100/100',
时间:500,，
},
{
img:'https://picsum.photos/id/1000/100',
时间：1000，
},
];
常量waitNext=({
时间
}) => {
返回新承诺（函数（解析）{
setTimeout（解析，时间）；
});
}
异步函数显示图像（图像）{
for（图像的常量图像）{
document.getElementById（'img'）.src=image.img；
等待下一步（图像）；
}
}
显示图像（图像）

---

请看下面的代码，它适合我：

var图像=[
{
img:'car_0.png'，
时间：3000，
},
{
img:“car_1.png”，
时间:500,，
},
{
img:“car_2.png”，
时间:500,，
},
{
img:“car_3.png”，
时间：1000，
},
]
var currentImage=0；
函数showImages（）{
设img=images[currentImage]；
控制台日志（img.img）；
setTimeout（函数（）{
currentImage++；
if（currentImage在html中添加
img
元素，并使用javascript更改其
src
属性

要按顺序显示图像，可以使用生成器函数

创建一个生成器函数，在特定时间后生成图像对象


创建另一个调用此生成器函数以获取图像对象的函数，从返回的图像对象获取
img
属性的值，并将其设置为
img
元素上的
src
属性的值

此函数还创建一个超时，该超时在与当前图像对象的
time
属性相等的时间后过期。超时过期时，此函数再次调用自身以从生成器函数获取下一个图像并显示该图像

重复这些步骤，直到不再显示图像



const图像=[
{img:'https://picsum.photos/id/0/100，时间：3000}，
{img:'https://picsum.photos/id/1/100，时间：500}，
{img:'https://picsum.photos/id/10/100，时间：500}，
{img:'https://picsum.photos/id/100/100’，时间：1000}
];
const img=document.querySelector（'img'）；
函数*getImage（）{
for（让图像中的图像）{
产量形象；
}
}
const imageGenerator=getImage（）；
函数showNextImage（）{
const image=imageGenerator.next（）.value；
如果（！image）返回；
img.src=image.img；
设置超时（showNextImage，image.time）；
};
showNextImage（）；
首先：

将第一行的
：
更改为
=
，

将最后一个
，
替换为
；
，

并从数组中最后一个对象的后面删除
，

其次，请尝试以下代码：

3000
3500
4000
5000

致电：

function displayImage(images, i=0) {
  if(images.length==0) return;
  console.log(images[i].img); // replace with whatever you want to do
  i++;
  if(i==images.length) i=0;
  setTimeout(displayImage,images[i].time,images,i);
}

或：

images[i+1]。时间将在最后一次迭代时中断循环。您需要之前所有“images”的总和+当前一个作为超时，而不是当前一个+下一个。您需要
img
元素来显示图像，然后更改该元素的
src
属性，而不是用未定义的值覆盖
图像
数组成员。“第一张照片car_0.png在页面上显示3秒钟。3秒钟后，它将变为第二张图像，显示0.5秒钟…”您的编辑没有解决我第一条评论中的要求。@Andreas idk我一开始没有得到它。这是另一个更新，“显示”的部分在哪里“图像？@G.aziz OP希望立即显示第一个图像。
3000
3500
4000
5000

function displayImage(images, i=0) {
  if(images.length==0) return;
  console.log(images[i].img); // replace with whatever you want to do
  i++;
  if(i==images.length) i=0;
  setTimeout(displayImage,images[i].time,images,i);
}

displayImage(images);

displayImage(images, 2); // if you want to start with the 3rd