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

Question

我对 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 新手...

Answer 1

您正在寻找setTimeout 函数。它接受两个参数：函数和延迟（毫秒），延迟后会调用函数。

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 + ')';
}