为视差背景添加滚动图像

Question

I am trying to make multiple images (3) fade in and out as parallax background. I am currently using a large animated gif which is not going to cut it due to the loading times and what I eventually need. I am trying to target a "data-background" attribute which I have done but can't seem to get the images to change. I can get it to output in the console but not the data-background. Below is the code.

Thanks!

<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

First of all, attributes that have "data-" in front of them are only used to store some custom data on elements. Those attributes do not influence the appearance/behaviour of your app in any way unless you use them in your JS/CSS.

So, in your code, you are setting the data-background attribute on your section. The code is working correctly and if you look into the inspector, you can actually see that that attribute's value is changing as expected.

The next step for you would be to display the images that you set in your data-background attribute - either using JS or CSS.

Unfortunately, for now, it's not possible to grab the background URL from attribute value in CSS as described in the top-voted answer here: Using HTML data-attribute to set CSS background-image url

However, you can still manually set the CSS background-image property using JavaScript based on the "data-" property.

 // 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> 

The thing is - in this case, you don't even actually need this data-background property. You can simply switch background image using JS.

Now, it's not very clear what you meant by parallax in your case. In case you actually meant parallax background like in here http://jsfiddle.net/Birdlaw/ny8rqzu5/ , you would need to take a different approach overall. Please comment if you need any help with this.