How do I change my background image between 2 images every 10 seconds?

 

I managed to do it with colours.. but with images it's more trickier.

 

 

Here: https://www.trevorsiu.com/email

You can do it using setInterval()

 

HTML:

<img src="http://oi59.tinypic.com/245wk5h.jpg" class="js-image-swap" />

JavaScript:

(function() {
    var imgs = [
            "http://oi57.tinypic.com/245njlt.jpg",
            "http://oi59.tinypic.com/245wk5h.jpg"
        ],
        img = document.querySelector(".js-image-swap"),
        counter = 0;
    
    setInterval(function() {        
        img.setAttribute("src", imgs[counter]);
        counter = (counter === imgs.length-1) ? 0 : counter+1;
    }, 10000);   
    
})();

Here's an example: http://jsfiddle.net/Lp1y77xf/

Can I add 3/4/5 images to swap with that example?

Can I add 3/4/5 images to swap with that example?

 

Yes, simply add to the imgs[] array, like so:

var imgs = [
"http://oi57.tinypic.com/245njlt.jpg",
"http://oi59.tinypic.com/245wk5h.jpg",
"Image 3 src",
"Image 4 src",
"Image 5 src"
]

Where does the HTML bit go? I got the current background in the body style tag.

I used a standard image. You would need to do something different to target a background image.

<img src="http://oi59.tinypic.com/245wk5h.jpg" class="js-image-swap" />

Maybe I should finish my KFC before I attempt this lol.. not sure if I'm doing it right.

This will do it:

(function() {
    var imgs = [
            "http://oi57.tinypic.com/245njlt.jpg",
            "http://oi59.tinypic.com/245wk5h.jpg"
        ],
        swap = document.querySelector(".js-image-swap"),
        counter = 0;
    
    setInterval(function() {        
        swap.style.backgroundImage = "url('" + imgs[counter] + "')";
        counter = (counter === imgs.length-1) ? 0 : counter+1;
    }, 10000);   
    
})();

http://jsfiddle.net/LyndseyB/Lp1y77xf/1/

And the javascript bit goes in <script type="text/javascript"> and </script> right?

And the javascript bit goes in <script type="text/javascript"> and </script> right?

 

Yes, or in an external file

And the CSS bit in <style type="text/css"> and </style>?

 

Just trying to figure out why it's not worked..

Have you got a link?

https://www.trevorsiu.com/email

Use the updated code which updates the CSS of the body, not the src of the image:

(function() {
    var imgs = [
            "http://oi57.tinypic.com/245njlt.jpg",
            "http://oi59.tinypic.com/245wk5h.jpg"
        ],
        swap = document.querySelector(".js-image-swap"),
        counter = 0;
    
    setInterval(function() {        
        swap.style.backgroundImage = "url('" + imgs[counter] + "')";
        counter = (counter === imgs.length-1) ? 0 : counter+1;
    }, 10000);   
    
})();

Ok.. just did that.. but nothing changes.

Ok. My fault, sorry. Move the script to the bottom of the page, just before the end body tag:

    <script>
    (function() {
        var imgs = [
            "http://oi57.tinypic.com/245njlt.jpg",
            "http://oi59.tinypic.com/245wk5h.jpg"
            ],
            swap = document.querySelector(".js-image-swap"),
            counter = 0;
    
        setInterval(function() {        
            swap.style.backgroundImage = "url('" + imgs[counter] + "')";
            counter = (counter === imgs.length-1) ? 0 : counter+1;
        }, 10000);      
    })();
</script>
</body>
</html>

Edited June 23, 201511 yr by Lyndsey

Yay.. it's worked.. thanks.

No worries!

One thing I've just noticed.. I put the same script on other pages.. but nothing happens?

 

(Edit: I forgot the class bit)

Edited June 25, 201511 yr by Sneijder