在指定時間後更改背景圖片

Question

我對JavaScript很陌生，因此我甚至沒有嘗試過這樣的道歉，因爲我不知道如何開始。

我有3張圖片。 Image1是一個PNG文件，Image2和Image3是GIF動畫。

但是我需要的是非常具體的。我希望Image1在x秒後更改爲Image 2，然後在y秒後更改爲Image3。一旦Image3被加載，我希望該gif保持爲頁面背景。

任何幫助，將不勝感激......

好了，所以這是我的那一刻，

var delay1 = 104000; 
var delay2 = 14000; 
setBackground('Image1.png'); 
setTimeout(function() { 
setBackground('Image2.gif'); 
setTimeout(function() { 
setBackground('Image3.gif'); 
}, delay2); 
}, delay1); 

function setBackground(src) { 
image.style.backgroundImage = 'url('Image1.png + Image2.gif + Image3.gif')'; 
} 

中運行時，沒有背景圖像加載在所有。對不起，如果我是一個完整的白癡。就像我說的，我是新來的JavaScript ...

Answer 1

您正在尋找setTimeout函數。它接受兩個參數：函數和延遲（ms），函數將在延遲後調用。

var delay1 = 2000; // 2 seconds 
var delay2 = 3000; // 3 seconds 
setBackground('image-1.png'); 
setTimeout(function() { 
    setBackground('image-2.gif'); 
    setTimeout(function() { 
     setBackground('image-3.gif'); 
    }, delay2); 
}, delay1); 

function setBackground(src) { 
    image.style.backgroundImage = 'url(' + src + ')'; 
}