为视差背景添加滚动图像

Question

我正在尝试使多个图像（3）作为视差背景淡入和淡出。 我当前使用的是大型动画gif，由于加载时间以及最终所需的内容，因此无法将其剪切。 我正在尝试定位一个已经完成但似乎无法更改图像的“数据背景”属性。 我可以将其输出到控制台，但不能输出数据背景。 下面是代码。

谢谢！

<section id="paralax-image" style="height: 400px;" class="module-cover parallax" data-background="" data-overlay="1"
        data-gradient="1">


(function () {

// The images array.
var images = ["assets2/Arcadian.jpg", "assets2/AngryPrawns.jpg", "assets2/Apricot_Smash.jpg"];

// The counter function using a closure.
var add = (function() {
    // Setting the counter to the last image so it will start with the first image in the array.
    var counter = images.length - 1;
    return function() {
        // When the last image is shown reset the counter else increment the counter.
        if(counter === images.length - 1) {
            counter = 0;
        } else {
            counter+=1;
        }
        return counter;
    }
})();

// The function for changing the images.
setInterval(
    function() {
      var section = document.getElementById("paralax-image");
      section.getAttribute("data-background");
        section.setAttribute('data-background', images[add()]);
        console.log(images[add()]);
    }
, 3000);

})();   

Answer 1

首先，前面带有“ data-”的属性仅用于在元素上存储一些自定义数据。 这些属性不会以任何方式影响应用程序的外观/行为，除非您在JS / CSS中使用它们。

因此，在您的代码中，您将在您的部分上设置data-background属性。 代码运行正常，如果您查看检查器，您实际上可以看到该属性的值正在按预期方式变化。

下一步是使用JS或CSS显示在data-background属性中设置的图像。

不幸的是，目前尚无法从CSS的属性值中获取背景URL，如此处最受好评的答案所述： 使用HTML数据属性设置CSS背景图像url

但是，您仍然可以基于“ data-”属性，使用JavaScript手动设置CSS background-image属性。

 // The images array. const images = ["https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350", "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350", "https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&w=1000&q=80"]; const imagesSwitcher = () => { const getCounter = () => { // Setting the counter to the last image so it will start with the first image in the array. let counter = images.length - 1; return () => { // When the last image is shown reset the counter else increment the counter. if(counter === images.length - 1) { counter = 0; } else { counter += 1; } return counter; } } const counter = getCounter(); const updateBackground = () => { const section = document.getElementById("paralax-image"); section.style.background = `url(${images[counter()]}) no-repeat`; }; updateBackground(); setInterval(() => updateBackground(), 3000); }; imagesSwitcher(); 

 .dynamic-background { display: block; width: 500px; height: 200px; background-size: 100%; } 

 <div> <section id="paralax-image" class="dynamic-background" style="height: 400px;" class="module-cover parallax" data-background="" data-overlay="1" data-gradient="1"> </section> </div> 

关键是-在这种情况下，您甚至实际上不需要此data-background属性。 您只需使用JS即可切换背景图片。

现在，还不清楚您所说的视差是什么意思。 如果您实际上是在这里http://jsfiddle.net/Birdlaw/ny8rqzu5/表示视差背景，则需要整体采用其他方法。 如果您需要任何帮助，请发表评论。