Question

我有一些我从codepen.io获得的Javascript代码。但是我在执行它时遇到了困难，尽管它是完全相同的代码。我刚刚学习Javascript，所以我是初学者。我没有使用HTML，我只使用CSS＆amp;的JavaScript。背景图像确实随机播放，但淡入淡出不起作用。

这是我的CSS片段：

body {
    margin: 0;
    background-image: url(/image1.jpg) no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    width: 100%;
    height: 100%;
    transition: 1s;
}

这是随身携带的JS。

var bgImageArray = ["image2.jpg", "image3.jpg", "image4.jpg"],
base = "/",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
    window.clearTimeout();
    var k = 0;
    for (i = 0; i < bgImageArray.length; i++) {
        setTimeout(function(){ 
            document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
            document.documentElement.style.backgroundSize ="cover";
        if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }            
        }, (secs * 1000) * i)   
    }
}
backgroundSequence();

非常感谢任何帮助！

Answer 1

我认为问题在于您将CSS规则定义为body，但在JavaScript中，新图像附加到documentElement，它等于html标记而不是{{1 }} 标签。

尝试更改这些行：

body

到此：

document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
document.documentElement.style.backgroundSize ="cover";

刚刚使用document.body.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed"; document.body.style.backgroundSize ="cover";

更改了documentElement

Answer 2

您应该将document.documentElement更改为document.body，然后移除window.clearTimeout

您可以看到此演示工作：

http://codepen.io/dangvanthanh/pen/NGpqYr

Javascript代码不会交叉淡入淡出

2 个答案: