如何每 X 秒更改一次背景图像? [英] How do I change the background image every X seconds?
问题描述
我有一个 div
填充整个页面(投资组合样式).div
有这种风格:
.image-head {背景:url('http://placehold.it/1920x1080') 无重复顶部中心固定;背景尺寸:封面;高度:100%;宽度:100%;边距:0;填充:0;颜色:黑色;文本对齐:居中;}
基本上,我想要做的是每 X 秒更改 div
指向它的背景图像的 url
,但我不确定如何执行此操作.
我的标记目前如下所示:
<div class="centering-hack"><h1>HTML</h1>
这里最简单/最好的解决方案是什么?
谢谢!
如果 JS 库使任何事情变得更容易,我将使用 Bootstrap 3
用你想要使用的图像制作一个数组:
var 图像 = ["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-superstifiable-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
每秒(或您想要的任何间隔)更改背景图片网址:
var i = 0;设置间隔(函数(){imageHead.style.backgroundImage = "url(" + images[i] + ")";i = i + 1;如果(我 == 图像.长度){我 = 0;}}, 1000);
这是一个活生生的例子:https://jsfiddle.net/vvwcfkfr/1/>
使用函数式编程、ES6 和递归的一些改进:
const 猫 = ["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-superstifiable-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})`}, 步骤 * (index + 1))))setTimeout(() => cycleImages(images, container, step), step * images.length)}循环图像(猫,节点,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屋!