使用Javascript更改背景css

Question

在网站http://scoopsgelato.co.uk/中，当它们的网页在页面顶部加载背景图像时，大约在10秒后发生变化。

我想知道如何做这个基本版本。在css中设置背景图像属性以循环显示图像的代码。

我试了几个小时才得到它，但我无法弄清楚。

Answer 1

既然你在寻找简单的东西，至少对于一些内联CSS来说，这是一个解决方案。

var imgArry = ["http://dummyimage.com/200x200/cf90cf/555770.png&text=pic+1", "http://dummyimage.com/200x200/c99011/555770.png&text=pic+2", "http://dummyimage.com/200x200/cc5601/555770.png&text=pic+3"]; 
function backgroundImageSlider(elem, imgs, speed){ 
    var index = 0; 
    var timer = setInterval(function(){ 
     elem.style.backgroundImage = "url(" + imgs[index] + ")"; 
     index++ 
     if(index == imgs.length){ 
     index = 0; 
     } 
    }, speed); 
} 

backgroundImageSlider(document.getElementById("imageDiv"), imgArry, 10000); 

这是一个JSFiddle。 https://jsfiddle.net/o3zhwhdp/1/

Answer 2

设置超时来改变图像的功能：

var imageSrcs=['//google.com/favicon.ico', '//w3schools.com/favicon.ico', '//stackoverflow.com/favicon.ico']; 
 
    var currentImage=0; 
 
    setInterval(function() { 
 
     if (currentImage<3) { 
 
     currentImage++; 
 
     } 
 
     else { 
 
     currentImage=0; 
 
     } 
 
     console.log(currentImage); 
 
     document.getElementById('image').src=imageSrcs[currentImage]; 
 
    }, 10000);

<image id="image" src="//google.com/favicon.ico">

这可能是不这样做最快/最短的路，但可以肯定的是很简单的理解它的动态。