如何使用javascript創建循環的html更改背景圖像

我的JavaScript腳本旨在不斷更改HTML頁面的背景圖像，但它不會完成所期望的功能。如何使用javascript創建循環的html更改背景圖像

function CB() { 
try { 
    var p = { 
     Pic1: 'Images/CoolPic2.jpg', 
     Pic2: 'Images/CoolPic3.jpg', 
     Pic3: 'Images/CoolPic4.jpg' 
    }; 
    var l = p.length; 
    i = 0; 
    while (i < l) { 
     setTimeout(function(){document.body.style.backgroundImage = url(p[i]); }, 3000) 
     i += 1; 
     if (i > l) { 
      i -= l; 
      } 
    } 
} 
catch(err) { 
    alert(err.message); 
} 
}

來源

2017-05-24 Neuranium

p是目標......應該p爲數組？ – NightKn8

我只知道如何以這種方式存儲數據。 – Neuranium

'p.length'未定義，因爲它是一個對象。 – doutriforce

你不需要while循環。只需使用setInterval（這將每3秒調用一次該函數）而不是setTimeout（這將調用一次）。 OK試試這個

function CB() { 
 
    try { 
 
     var p = [ 
 
      'Images/CoolPic2.jpg', 
 
      'Images/CoolPic3.jpg', 
 
      'Images/CoolPic4.jpg' 
 
     ]; 
 

 
     var counter = 0; 
 

 
     setInterval(function(){ 
 
      //document.body.style.backgroundImage = url(p[counter++]); 
 
      console.log(counter++); 
 

 
      if(counter == 3){ 
 
       counter = 0; 
 
      } 
 
     }, 3000) 
 
    } catch(err) { 
 
     alert(err.message); 
 
    } 
 
} 
 

 
CB();

來源

2017-05-24 22:09:34 vabii

謝謝！它像一個魅力一樣工作！ – Neuranium

這樣的接縫：

let i = 1; // = 1 because we want to load first color/image onload 
 
const color = ["black", "blue", "brown", "green"]; //change colors to url's 
 
change =() => { 
 
    document.body.style.backgroundColor = color[i];//change to background= url(color[i]) 
 
    i = (i + 1) % color.length; 
 
} 
 
document.body.style.backgroundColor = color[0]; // this will load first collor/image 
 
setInterval(change, 3000);

基於：LINK

來源

2017-05-24 22:24:46 NightKn8

如何使用javascript創建循環的html更改背景圖像

回答

相關問題