JavaScript，如何更改每隔x秒的div標記的背景

-1

我試圖讓一些JavaScript代碼每隔X秒更改兩個div標記的背景。這裏是我的代碼：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 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);  
});

背景圖像應該是隨機變化的，但他們甚至沒有任何改動。

來源

2012-12-12 Vinicius Santana

哪些編輯你剛纔做什麼呢？請說明他人何時正在積極努力。 –

對不起。我更改了img1的var img，並添加了一個變量並命名爲img2。我還將$（body'）.css（「backgrou ...」）更改爲$（'＃bg_left'）.css（「..併爲#bg_right添加了一個動作。 –

請勿」碰撞「你的問題在標題中加入「UNSOLVED：」。未解決的問題已經在視覺上顯示。 – Sparky

OK，我看到你的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-12 19:11:37 jfriend00

ops ..多數民衆贊成在一個錯誤...我即將改變..＃的身體應該是#bg_left ..感謝您的注意。 –

這不是問題雖然..我試圖改變divs的背景#div_right和#div_left –

今天我有什麼......：p我的意思是。 divs #bg_right和#bg_left –

爲了測試我又增加了圖像陣列，使我們得到了在分揀有些區別。

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

兩個變化在這裏：

爲了您總像數，我用手工檢索數組中的圖像的總數，而不是動態的（bgimgs.length）
在你有條件重置id值，總計數減1.因爲JS有零基索引，不這樣做會得到一個未定義的錯誤（一個3項數組將在你的原始代碼中的值爲4最後一次迭代）。

儘管此代碼通過您的數組做循環，它不是隨機的。這是另一個話題。

來源

2012-12-12 20:01:34

使用長度而不是更改數字來完成添加了第二個修復程序的作業，cnt -1。感謝那。但循環仍然不運行。檢查下面的鏈接。 http://jsfiddle.net/vinicius5581/B9aQg/8/ –

對於那些不使用JQuery，只需做到以下幾點：

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

來源

2013-08-14 16:22:49 user2070775

JavaScript，如何更改每隔x秒的div標記的背景

回答

相關問題