JQuery простую анимацию / поворот css background-image внутри div?

Question

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

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

bg-1.jpg, bg-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, как у вас.

---

РЕДАКТИРОВАТЬ: Или, если в 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);