jquery简单的动画/旋转css背景图像在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);