如何重新启动/循环window.onload javascript程序而无需重新加载网页

Question

我有这个javascript程序每4秒更改一次我的网站背景，它会在页面加载时自动启动。我想知道是否有办法让它在显示最后一张图像后超过4秒开始。我试过的方法不起作用，我认为它是因为程序只会在页面加载/重新加载时运行，所以如果有另一种（简单）方法启动程序而没有window.onload，这将允许我重新启动程序而不重新加载页面，我很想知道！

这是我的代码：

window.onload = function timer() {
setTimeout(change1, 4000) 
setTimeout(change2, 8000) 
setTimeout(change3, 12000) 
setTimeout(change4, 16000) 
setTimeout(change5, 20000) 
setTimeout(change6, 24000) 
setTimeout(change7, 28000) 
setTimeout(change8, 32000) 
setTimeout(change9, 36000) 
setTimeout(change10, 40000) 
setTimeout(change11, 40001)
}
function change1() {
document.getElementById("header").style.backgroundImage = "url('images/battlefield1.jpg')";
}
function change2() {
document.getElementById("header").style.backgroundImage = "url('images/battlefront.jpg')";
}
function change3() {
document.getElementById("header").style.backgroundImage = "url('images/gtav.jpg')";
}
function change4() {
document.getElementById("header").style.backgroundImage = "url('images/doom4.jpg')";
}
function change5() {
document.getElementById("header").style.backgroundImage = "url('images/darksouls.jpg')";
}
function change6() {
document.getElementById("header").style.backgroundImage = "url('images/civVI.jpg')";
}
function change7() {
document.getElementById("header").style.backgroundImage = "url('images/stardew.jpg')";
}
function change8() {
document.getElementById("header").style.backgroundImage = "url('images/superhot.jpg')";
}
function change9() {
document.getElementById("header").style.backgroundImage = "url('images/watchdogs.jpg')";
}
function change10() {
document.getElementById("header").style.backgroundImage = "url('images/mafia.jpg')";
}
function change11() {
timer();
}

谢谢！

Answer 1

你可以这样做

＆＃13;

＆＃13;

function timer() {
  setTimeout(change1, 4000)
  setTimeout(change2, 8000)
  setTimeout(change3, 12000)
  setTimeout(change4, 16000)
  setTimeout(change5, 20000)
  setTimeout(change6, 24000)
  setTimeout(change7, 28000)
  setTimeout(change8, 32000)
  setTimeout(change9, 36000)
  setTimeout(change10, 40000)
  setTimeout(change11, 40001)
}

function change1() {
  document.getElementById("header").style.backgroundImage = "url('images/battlefield1.jpg')";
  console.log("change1")
}

function change2() {
  document.getElementById("header").style.backgroundImage = "url('images/battlefront.jpg')";
  console.log("change2")
}

function change3() {
  document.getElementById("header").style.backgroundImage = "url('images/gtav.jpg')";
  console.log("change3")
}

function change4() {
  document.getElementById("header").style.backgroundImage = "url('images/doom4.jpg')";
}

function change5() {
  document.getElementById("header").style.backgroundImage = "url('images/darksouls.jpg')";
}

function change6() {
  document.getElementById("header").style.backgroundImage = "url('images/civVI.jpg')";
}

function change7() {
  document.getElementById("header").style.backgroundImage = "url('images/stardew.jpg')";
}

function change8() {
  document.getElementById("header").style.backgroundImage = "url('images/superhot.jpg')";
}

function change9() {
  document.getElementById("header").style.backgroundImage = "url('images/watchdogs.jpg')";
}

function change10() {
  document.getElementById("header").style.backgroundImage = "url('images/mafia.jpg')";
}

function change11() {
  console.log("change11")
  timer();
}

timer();

＆＃13;

<div id="header"></div>

＆＃13;

＆＃13;

＆＃13;