Question

我有一张图像要在屏幕上停留5秒钟，然后更改为另一张图像0.5秒，然后再更改回原始图像。

我已将间隔设置为每5秒更改一次，但是我似乎无法弄清楚如何根据时间更改它。

任何帮助或指导将不胜感激！

window.setInterval(function() {

  var img = document.getElementById("glitch");
  img.src = "2-01.svg";

}, 5000);

Answer 1

尝试一下：

const images = ["1.svg", "2.svg"]
var element = document.getElementById("glitch");

function showFirst() {
  setTimeout(() => {
    element.src = images[0];
    showSecond()
  }, 5000)
}

function showSecond() {
  setTimeout(() => {
    element.src = images[1];
    showFirst()
  }, 500)
}

showFirst()

Answer 2

您始终每次都将图像src更改为相同的“ 2-01.svg”。请使用一些标志/条件来替换图像src。

您可以在这里尝试:::

window.setInterval(function() {

  var img = document.getElementById("glitch");
  if(img.src == "2-01.svg") {
     img.src = "2-00.svg"
  }
  else {
    img.src = "2-01.svg";
  }
}, 5000);

Answer 3

我正在做一些测试以查看线程。

如果可以帮助您（这不是干净的代码）：

img_to_change = document.querySelector("#glitch");

imgs = {"a":10, "b":2, "c":3}
keys = Object.keys(imgs)
run = function(i){
  img_src = keys[i];
  img_next_time = imgs[keys[i]];
  img_to_change.src = img_src;
  i = (i+1) == keys.length ? -1 : i;
  setTimeout(() => {
    img_to_change.src = img_src;
    run(i+1);
  }, img_next_time*1000)
}
run(0);

http://jsfiddle.net/pn3dyb5m/32/

Javascript两次间隔图像更改

3 个答案: