javascriptで背景を変える背景を作る方法

Question

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

Answer 1

whileループは必要ありません。 setTimeoutではなくsetIntervalを使用してください（これは3秒ごとに関数を呼び出します）。 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();

Answer 2

をこのようにしてみ縫い目：に基づいて

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