為視差背景添加滾動圖像

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/表示視差背景，則需要整體采用其他方法。 如果您需要任何幫助，請發表評論。