jquery 简单地对 div 内的 css 背景图像进行动画/旋转？

Question

我想知道是否有人可以帮助我，或者为我指出正确的方向。我正在寻找一个 jquery 片段，它将每隔 5 秒左右自动更改 div 的背景图像。我的初始背景图像是在 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);