如何使用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更改背景图像

回答

相关问题