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

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

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 代码的早期版本中的先前 cmets：

$('#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 项数组将在您的最后一次迭代的原始代码）。

虽然这段代码会循环遍历您的数组，但它不是随机的。那是另一个话题。

Answer 3

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

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