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开始按顺序编入索引。

编辑：或者，如果网址中的其他地方有一个数字，请改为执行此操作：

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

jquery简单的动画/旋转css背景图像在div内？

2 个答案: