在指定时间后更改背景图像

时间:2014-09-12 17:45:55

标签: javascript html5

我对javascript很新,所以道歉我甚至没有尝试过这个,因为我不知道如何开始。

我有3张图片。 Image1是一个png文件,Image2和Image 3是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的新手......

1 个答案:

答案 0 :(得分:0)

您正在寻找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 + ')';
}