jquery simple animate/rotate of a css background-image inside a div?

Question

Hi all,

I was wondering if anyone could help me out, or point me in the right direction. I'm looking for a snippet of jquery that will automatically change the background image of a div every say 5 seconds or so. My initial bg image is set in css, but i'm not sure how to create the function to make it swap between an array of images?

I have 5 images:

bg-1.jpg, bg-2.jpg, bg-3.jpg, bg-4.jpg, bg-5.jpg.

Currently my div is set to bg-1.jpg.

<div id="page_bg"></div>

Don't really have any code to show, but hopefully someone can help me out :)

Answer 1

Something like this should do the trick?

jQuery( function( $ ) {
    var images = [ "bg-1.jpg", "bg-2.jpg", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg" ];
    var currentImage = 0;

    function changeBackground() {
        $( '#page_bg' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }

    setInterval( changeBackground, 5000 );  
});

Answer 2

If those are the actual image names, you really wouldn't need an Array.

  // cache the element
var $page_bg = $('#page_bg');

setInterval( function() {
    $page_bg.css( 'background-image', function(i,bg) {
       return bg.replace(/\d/, function(str) { return (str % 5) + 1;});
    });
}, 5000);

In the return (str % 5) + 1; part, the number 5 represents the total number of images. They should be sequentially indexed starting with 1 like yours are.

---

EDIT: Or if there will be a number elsewhere in the URL, then do this instead:

  // cache the element
var $page_bg = $('#page_bg');

setInterval( function() {
    $page_bg.css( 'background-image', function(i,bg) {
       return bg.replace(/(\d)(\.jpg)/, function(str,p1,p2) { return ((p1 % 5) + 1) + p2;});
    });
}, 5000);