Question

我对JS很新，并且摸索着它。

是否有人知道如何定位特定div ID以便将交叉渐变背景图像应用于该特定div？

非常感谢任何帮助！

我的HTML：

<div id="header-background-slider"></div>

我的CSS：

#header-background-slider{
  background-size: cover;
  background: url("/image001.jpg") no-repeat center center fixed;
  background-blend-mode: darken;
  transition: 3s;
}

我的JS：

var bgImageArray = ["image001.jpg", "image002.jpg", "image003.jpg"],
base = "/",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
});

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

如果我认为是正确的，请将document.documentElement替换为document.getElementById("header-background-slider")。把东西放在后面。：）

document.documentElement定位所谓的＆＃34;根节点＆＃34;。由于您希望定位特定的内容，因此可以使用document.getElementById从DOM（文档对象模型）中选择它。

JavaScript背景滑块以定位div ID

1 个答案: