-1

我正在尝试编写一些 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脚本

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

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

4

3 回答 3

5

好的,我在你的 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 标签上设置了一个半透明的背景图片。这真的是你想要的吗?

于 2012-12-12T19:11:37.620 回答
1

为了测试,我在数组中添加了另一个图像,以便我们在排序中得到一些区别。

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 的值最后一次迭代)。

虽然此代码确实循环通过您的数组,但它不是随机的。那是另一个话题。

于 2012-12-12T20:01:34.967 回答
1

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

document.body.style.backgroundImage="url(images/mybackgroundimage.jpg)";
于 2013-08-14T16:22:49.103 回答