Question

我正在尝试制作一些JavaScript代码，每隔X秒更改两个div标签的背景。这是我的代码：

HTML

<div id="bg_left"></div>
<div id="bg_right"></div>

CSS 身体{ 高度：100％; }

#bg_left{
   height:100%;
   width:50%;
   left:0;
   position:fixed;
   background-position:left;
}
#bg_right{
    height:100%;
    width:50%;
    right:0;
    position:fixed;
    background-image:url(http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png);
    background-position:right;
}

JAVA SCRIPT

 function carousel_bg(id) {
     var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; 
     var img1 = bgimgs[id];
     var img2 = bgimgs[id+1];
     var cnt = 2; 

     $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
     $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");

     id = id + 1;
     if (id==cnt) id = 0;

     setTimeout("carousel_bg("+id+")", 10000); 
 }

 $(document).ready(function() {
        carousel_bg(0);     
 });

背景图像应该随机变化，但它们根本不会发生变化。

Answer 1

好的，我在你的jsFiddle中看到了这个问题。因为您将字符串传递给setTimeout()，所以该字符串仅在顶级范围内进行评估。但是，您传递的函数名称不在顶级范围内（它位于jsFiddle的onload处理程序中）。因此，我改变了JS在jsFiddle中的定位方式，因此它现在处于顶级范围。我还修改了选择图像的逻辑，它现在可以在这里工作：http://jsfiddle.net/jfriend00/awVYP/

而且，这里是一个清理过的版本，它没有将字符串传递给setTimeout()（一种更好的编写javascript的方法），它传递一个本地函数并使用一个闭包来跟踪当前索引：http://jsfiddle.net/jfriend00/LVGNN/

    function carousel_bg(id) {
        var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; // add images here..

        function next() {
            if (id >= bgimgs.length) {
                id = 0;
            }
            var img1 = bgimgs[id];
            id++;
            if (id >= bgimgs.length){
                id = 0;
            }
            var img2 = bgimgs[id];

            $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
            $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");
            setTimeout(next, 1000);
        }
        next();
    }

    $(document).ready(function() {
            carousel_bg(0);     
    });

之前对早期版本的评论，以及OP的代码：

$('#body')

应该是：

$('body')

甚至更快：

$(document.body)

另外，你的jsFiddle显示了一个奇怪的问题。您的CSS在HTML标记上有背景图像，但您的javascript在body标记上设置了半透明背景图像。这真的是你想要的吗？

Answer 2

为了测试，我在数组中添加了另一个图像，以便我们在排序中有所区别。

function carousel_bg(id) {
    var bgimgs = [  'http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png', 'http://presotto.daterrawebdev.com/d/img/burningman_bg.png', 'http://gallery.orobouros.net/var/albums/2012/NewYorkComicCon2012/Legend-of-Korra/nycc_20121013_164625_0041.jpg?m=1354760251' ]; // add images here..
    var img1 = bgimgs[id+1];
    var img2 = bgimgs[id];
    var cnt = bgimgs.length; // change this number when adding images..

    $('#bg_left').css("background-image", "url("+img1+")");
    $('#bg_right').css("background-image", "url("+img2+")");

    id = id + 1;
    if (id== (cnt - 1) ) id = 0;

    setTimeout("carousel_bg("+id+")", 10000);
}

这里有两处变化：

对于您的总图像数量，我正在动态而不是手动检索数组中的图像总数（ bgimgs.length ）
在重置id值的条件中，减去总计数1.因为JS具有从零开始的索引，所以不这样做会得到一个未定义的错误（一个3项数组将在你的值中吐出一个值4最后一次迭代的原始代码。）。

虽然这段代码在数组中循环，但它并不是随机的。那是另一个话题。

Answer 3

对于那些不使用JQuery的人，只需执行以下操作：

document.body.style.backgroundImage="url(images/mybackgroundimage.jpg)";

JavaScript，如何每隔x秒更改一次div标签的背景

3 个答案: