-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 回答