Javascript代碼不會交叉淡入

我有一些Javascript代碼，我從codepen.io中獲得。但是我執行它的時間很艱難，儘管它的確是相同的代碼。我只是在學習Javascript，所以我是初學者。我沒有使用HTML，我只是使用CSS & Javascript。背景圖片會隨機播放，但淡入淡出不起作用。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();

任何幫助將不勝感激！

來源

2015-10-02 Christina Perla

使用不當clearTimeout'的'。 – PHPglue

我認爲問題在於您將CSS規則定義爲body，但在您的JavaScript中，新圖像附加到documentElement，它等於html標記，而不是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與body

來源

2015-10-02 02:18:06 1cgonza

你應該改變document.documentElement到document.body，你可以刪除window.clearTimeout

你可以看到這個演示的工作：

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

來源

2015-10-02 02:43:39

不知道如何遵循這個..你能解釋一些嗎？ –

Javascript代碼不會交叉淡入

回答

相關問題