以不同的间隔显示图像答案

【问题标题】：displaying an image at different intervals以不同的间隔显示图像
【发布时间】：2021-09-08 05:18:35
【问题描述】：

我需要使用 html 或 javascript 以不同的时间间隔显示四个图像。

第一张图片 2 秒第二张图像 2.5 秒第三张图片 5 秒第四个图像 2.5 秒

我看过一些让它们在设定的时间间隔内更改的示例，但不确定如何设置不同的时间间隔。

任何帮助都会非常有帮助！

非常感谢！

【问题讨论】：

显示您尝试过的标记和脚本，以便我们帮助您修复它
有很多方法可以做到这一点，但我建议使用 CSS 动画并设置延迟。 stackoverflow.com/questions/29846224/…

标签： javascript html time intervals

【解决方案1】：

这是一种方法 - 使用函数来设置超时并调用自身直到完成。当您运行下面的 sn -p 时，观察 console.log 以查看何时插入新图像。此外，这有 5 张图片 - 第一张是默认图片，在 2 秒后加载第一张图片之前显示。

let n = 0,
  timeouts = [0, 2, 2.5, 5, 2.5],
  imgs = ['default-beginning-image.jpg', 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'
  ];
const doImages = (num) => {
  setTimeout(() => {
    console.log('show', imgs[num])
    document.querySelector('[data-changer]').setAttribute('src', imgs[num]);
    if (num++ < imgs.length) doImages(num);
  }, timeouts[num] * 1000)
}

doImages(n);

&lt;img data-changer src='' /&gt;

【讨论】：

【解决方案2】：

你可以使用 Promises：

const img = document.querySelector('img');
const cycleImages = ["https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1",
  "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1",
  "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=144&d=identicon&r=PG&f=1",
  "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=192d=identicon&r=PG&f=1"
]

async function cycle() {
  img.src = cycleImages[0];
  await new Promise(r => setTimeout(r, 2000));
  img.src = cycleImages[1];
  await new Promise(r => setTimeout(r, 2500));
  img.src = cycleImages[2];
  await new Promise(r => setTimeout(r, 5000));
  img.src = cycleImages[3];
  await new Promise(r => setTimeout(r, 2500));
  cycle();
}
cycle();

&lt;img&gt;

【讨论】：