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

Question

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 di

Answer 1

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);