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

background背景圖像應該隨機變化，但它們甚至根本沒有變化。

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標簽上設置了半透明背景圖片。 那真的是你想要的嗎？

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項數組將在原始代碼中吐出4的值）最后一次迭代）。

盡管此代碼確實遍歷了數組，但並不是隨機的。 那是另一個話題。

Answer 3

對於不使用JQuery的用戶，只需執行以下操作：

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