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

Question

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

HTML

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

CSS body {身高: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标记上设置了半透明背景图像.这真的是你想要的吗？