用于定位 div ID 的 JavaScript 背景 slider

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 的目标是所谓的“根节点”。由于您想要定位特定的内容，因此可以使用 document.getElementById 从 DOM(文档对象模型)中选择它。