jquery простой анимация/поворот css background-image внутри div?

Question

Мне было интересно, может ли кто-нибудь помочь мне или указать мне в правильном направлении. Я ищу фрагмент jquery, который автоматически изменит фоновое изображение div каждые 5 секунд или около того. Мое начальное изображение bg установлено в css, но я не уверен, как создать функцию, чтобы она менялась между массивом изображений?

У меня есть 5 изображений:

BG-1.jpg, 2.jpg BG-Б.Г.-3.jpg, BG-4.jpg, BG-5.jpg.

В настоящее время мой div установлен в bg-1.jpg.

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

Не действительно есть код, чтобы показать, но, надеюсь, кто-то может помочь мне :)

Answer 1

Что-то вроде этого следует сделать трюк?

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

Если это фактические имена изображений, вам действительно не нужен массив.

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

В return (str % 5) + 1; части, число 5 представляет общее количество изображений. Они должны быть последовательно проиндексированы, начиная с 1, как у вас.

---

EDIT: Или, если будет ряд других в URL, то сделать это вместо:

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