jquery简单的动画/一个CSS内的背景图像旋转div？

我想知道是否有人能够帮助我，或指出我的方向是正确的。我正在寻找一个jQuery的片段，每隔5秒左右就会自动更改div的背景图片。我最初的bg图像是在CSS中设置的，但我不确定如何创建函数以使其在图像数组之间交换？jquery简单的动画/一个CSS内的背景图像旋转div？

我有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>

真的没有任何代码来显示，但希望有人能帮助我了:)

来源

2010-10-14 SoulieBaby

像这样的东西应该做的伎俩？

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

来源

2010-10-14 14:03:47 Paul

如果这些是实际的图像名称，你真的不需要一个数组。

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

来源

2010-10-14 14:16:56 user113716

jquery简单的动画/一个CSS内的背景图像旋转div？

回答

相关问题