Question

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

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

我试了几个小时自己拿到它，但我无法理解。

Answer 1

将超时设置为更改图像的功能：

    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">

这可能不是最快/最短的方式，但它很容易理解它的动态。

Answer 2

由于您正在寻找简单的东西，这里至少对于一些内联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/

用Javascript更改背景css

2 个答案: