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

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脚本

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

background背景图像应该随机变化，但它们甚至根本没有变化。

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

这里有两个变化：

1. 对于您的总图像数量，我将动态而不是手动获取数组中图像的总数量（ bgimgs.length ）
2. 在有条件重置ID值的情况下，将总数减去1。由于JS具有从零开始的索引，不这样做将为您带来未定义的错误（3项数组将在原始代码中吐出4的值）最后一次迭代）。

尽管此代码确实遍历了数组，但并不是随机的。 那是另一个话题。

Answer 3

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

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