如何每X秒更改背景图像？ [英] How do I change the background image every X seconds?

问题描述

我有一个 div 来填充整个页面（组合风格）。 div 具有以下风格：

  .image-head {
 background：url（'http://placehold.it/1920x1080'）无重复顶部中心固定; 
 background-size：cover; 
身高：100％; 
宽度：100％; 
保证金：0; 
 padding：0; 
颜色：黑色; 
 text-align：center; 
} 
  

基本上，我想要做的是每X秒改变 url div 指向它的背景图片，但我不确定如何操作。

我的标记目前如下所示：

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

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

感谢！

编辑：我使用Bootstrap 3如果JS库变得更容易

解决方案

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

  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（或者您想要的任何时间间隔）：
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/

I have a div that fills the entirety of a page (portfolio style). The div has this style:

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

Basically, what I want to do is every X seconds change the url that the div points to for it's background image, but I am unsure on how to do this.

My markup currently looks like this:

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

What's the simplest/best solution here?

Thanks!

Edit: I'm using Bootstrap 3 if the JS library makes anything easier

解决方案

Make an array with the images you want to use:

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

We retrieve the div whose background you want to change:

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

You can now use setInterval to change the background image url every second (or whatever interval you want):

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

Here's a live example: https://jsfiddle.net/vvwcfkfr/1/

Some improvements using functional programming, ES6 and recursiveness:

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/

这篇关于如何每X秒更改背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！