jquery simple animation/rotation d'un css background-image à l'intérieur d'un div?

Question

Je me demandais si quelqu'un pouvait m'aider ou me diriger dans la bonne direction. Je suis à la recherche d'un extrait de jquery qui changera automatiquement l'image d'arrière-plan d'un div tous les 5 secondes environ. Mon image bg initiale est définie dans css, mais je ne suis pas sûr comment créer la fonction pour le faire permuter entre un tableau d'images?

J'ai 5 images:

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

Actuellement, mon div est défini sur bg-1.jpg.

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

Ne pas vraiment avoir un code pour montrer, mais nous espérons que quelqu'un peut me aider :)

Answer 1

Quelque chose comme ça devrait faire l'affaire?

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

Si ce sont les noms d'image réels, vous n'auriez vraiment pas besoin d'un tableau.

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

Dans la partie return (str % 5) + 1;, le nombre 5 représente le nombre total d'images. Ils doivent être indexés séquentiellement en commençant par 1 comme les vôtres.

---

EDIT: Ou s'il y aura un certain nombre d'autres dans l'URL, puis le faire à la place:

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