jQuery根据特定文件夹设置的间隔淡入不同的背景图像

时间:2012-10-10 14:04:23

标签: javascript jquery css

我想将身体背景淡化为按间隔设置的特定文件夹中的其他图像。我有脚本来运行setInterval,但它根本不会改变背景图像,事实上它甚至不会改变为空白图像。图像位于具有script.js文件的文件夹中(调用以下脚本的文件相同)。我正在运行一个简单的随机数发生器来确定要运行的文件(文件名为1,2,3,4.jpg等)。

如果我可以预加载图像,那将是理想的,但我认为这是另一个问题:

  $(document).ready(function() {

var image;

function changeImage() {
    image = Math.floor(Math.random() * 2) + 1;
    $("body").css("background-image",image+".jpg");
}

setInterval(changeImage, 3000);
 });

3 个答案:

答案 0 :(得分:2)

看起来您正在为background-image设置属性,但未指定url,请尝试以下操作:

$("body").css("background-image","url(" + image+ ".jpg)");

或替代方案

image = Math.floor(Math.random() * 2) + 1;
image = "url(" + image + ".jpg)"
$("body").css("background-image",image);

答案 1 :(得分:2)

你可以将jQuery扩展为:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

现在您可以通过以下方式预加载图像:

$(['1.jpg','2.jpg','3.jpg','4.jpg']).preload();

并且您更改背景的代码可能看起来像

  $(document).ready(function() {
    var image;

    function changeImage() {
        image = Math.floor(Math.random() * 2) + 1;
        $("body").css("background-image","url('" + image+ ".jpg')");
     }
   });

setInterval(changeImage, 3000);

答案 2 :(得分:0)

你在网址中使用这个没有双人床的jQuery并使用背景而不是背景图像

image = Math.floor(Math.random() * 2) + 1;
$("body").css({background:"url(" + image  + ".jpg)"})