Question

我想让页面的背景图像每5秒更改一次。有5张图片，我希望它们循环播放。

我在这里彻底研究并尝试了不同的方法。有人可以告诉我这段代码有什么问题：

在我的CSS中我有：

html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    background-image:url('images/indexbg01.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
}

和我的javascript：

var imageArray = ['images/indexbg02.jpg', 'images/indexbg03.jpg', 
                  'images/indexbg04.jpg', 'images/indexbg05.jpg', 
                  'images/indexbg01.jpg'];
var imageIndex = 0;

function changeBgImage(){
    var imageUrl = "url('" + imageArray[imageIndex] + "')";
    $('body').css('background-image', imageUrl);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

setInterval(changeBgImage, 5000);

我首先在后面的行中构建了imageUrl变量，但是我添加了这个，所以我可以检查它是否构建正常。在chrome调试器中，当我在imageUrl构建行之后的行上放置一个断点时，它每隔5秒就会很好地停止，imageUrl会按原样构建，但背景不会改变。

Answer 1

在小提琴中工作。这意味着你需要在页面加载之后运行脚本，就像小提琴一样：

$(window).load(function(){
    //your script
});

Working fiddle

Answer 2

我编辑了小提琴：http://jsfiddle.net/5Cv49/1/。

输入并查看。唯一的标记是：

<div id="wrapper"></div>

唯一修改过的css是：

adding #wrapper to the selector.

了解背景如何与＃wrapper的背景重叠。

Answer 3

我个人过去采用的一种方法是使用jQuery进行整页幻灯片放映。您可以从互联网上使用多种版本的幻灯片。其中有100个比其他更好。在幻灯片中，您可以按照自己的意愿每5秒更换一次。在你的html中将幻灯片放在div中（例如#slideshow_background）。将你的html页面的其余部分包装到另一个包装器中（#content）。在您的CSS中设置以下内容..

#slideshow_background {
   margin:0;
   padding: 0;
   position : initial;
   width: 100%;
   height:100%;
}

将css放入#content并将z-index设置为1，使其位于幻灯片放映之上。

希望这有帮助

使用setInterval更改背景

3 个答案:

Working fiddle