JavaScript，如何每隔x秒更改div标签的背景 [英] JavaScript, How to change the background of a div tag every x seconds

问题描述

我正在尝试编写一些JavaScript代码，以每X秒更改两个div标签的背景.这是我的代码:

I'm trying to make some JavaScript code to change the background of two div tags every X seconds. Here is my code:

HTML

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

CSS 身体{ 高度:100％; }

CSS body{ height: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);     
 });

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

​ The background-images should be changing randomly, but they don't even change at all.

推荐答案

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

OK, I see the issue in your jsFiddle. Because you're passing a string to setTimeout() that string will be evaluated only at the top level scope. But, the function name you were passing is not at the top level scope (it's in an onload handler for the jsFiddle). So, I changed the way your JS is positioned in the jsFiddle so it is now at the top level scope. I also fixed up the logic for selecting an image and it now works here: http://jsfiddle.net/jfriend00/awVYP/

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

And, here's a cleaned up version that does not pass a string to setTimeout() (a much better way to write javascript) that passes a local function and uses a closure to keep track of the current index: 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的代码的先前注释:

---

Previous comments on earlier version so of the OP's code:

$('#body')

应为:

$('body')

甚至更快:

$(document.body)

此外，您的jsFiddle显示了一个奇怪的问题.您的CSS在HTML标签上有一个背景图片，但是您的javascript在body标签上设置了一个半透明的背景图片.那真的是你想要的吗?

Also, your jsFiddle shows a bit of an odd issue. Your CSS has a background image on the HTML tag, but your javascript sets a semi-transparent background image on the body tag. Is that really what you want?

这篇关于JavaScript，如何每隔x秒更改div标签的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！