javascript - 如何每 X 秒更改一次背景图像？

Question

我有一个 div 可以填充整个页面(作品集样式)。 div 具有以下样式:

.image-head {
  background: url('http://placehold.it/1920x1080') no-repeat top center fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
}

基本上，我想做的是每 X 秒更改 div 指向它的背景图像的 url，但我不确定如何执行此操作.

我的标记目前看起来像这样:

<div class="image-head">
  <div class="centering-hack">
    <h1>Something HTML</h1>
  </div>
</div>

这里最简单/最好的解决方案是什么？

谢谢!

编辑:如果 JS 库使任何事情变得更容易，我正在使用 Bootstrap 3

Answer 1

用你想使用的图像制作一个数组:

var images = [
  "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
  "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]

我们检索要更改其背景的 div:

var imageHead = document.getElementById("image-head");

您现在可以使用 setInterval 每秒(或您想要的任何时间间隔)更改背景图片 url:

var i = 0;
setInterval(function() {
      imageHead.style.backgroundImage = "url(" + images[i] + ")";
      i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}, 1000);

这是一个活生生的例子:https://jsfiddle.net/vvwcfkfr/1/

使用函数式编程、ES6 和递归的一些改进:

const cats = [
  "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
  "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]

const node = document.getElementById("image-head");

const cycleImages = (images, container, step) => {
    images.forEach((image, index) => (
    setTimeout(() => {
        container.style.backgroundImage = `url(${image})`  
    }, step * (index + 1))
  ))
  setTimeout(() => cycleImages(images, container, step), step * images.length)
}

cycleImages(cats, node, 1000)

https://jsfiddle.net/du2parwq/