2017-01-07 2 views
0

У меня есть эта javascript программа, чтобы менять фон моего сайта каждые 4 секунды, и он запускается вправо, так как страница загружается так, что она автоматическая. Мне было интересно, есть ли способ запустить его через 4 секунды после отображения последнего изображения. Способы, которые я пробовал, не работают, и я думаю, что это потому, что программа будет работать только при загрузке/перезагрузке страницы, поэтому, если есть еще один (простой) способ запускать программу без window.onload, которая позволила бы мне перезагрузите программу, не перезагружая страницу, я бы с удовольствием узнал!Как перезапустить/закодировать программу window.onload javascript, не перезагружая веб-страницу

Вот мой код:

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(); 
} 

Спасибо!

+0

Просто есть функции обращаются друг к другу с помощью 'setTimeout' (так' change10' затем запускает 'change1')? (Также я бы настоятельно рекомендовал рефакторинг, это выглядит довольно грязно для чего-то, что только меняет фоновое изображение) – UnholySheep

ответ

1

Вы можете сделать это путь

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();
<div id="header"></div>

Смежные вопросы