How do I change the background image every X seconds?
Solution 1
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/
Solution 2
If I corect underestand your problem you want somthink like http://codepen.io/dodekx/pen/BKEbPK?editors=1111
var url = ['http://lorempixel.com/400/200/sports/' ,
'http://lorempixel.com/400/200/city/'];
curentImageIndex = 0;
setInterval(function(){
console.log(url[curentImageIndex])
var p = $('.image-head');
p.css("background","url("+url[curentImageIndex++] + ")");
if(curentImageIndex>= url.length){curentImageIndex = 0}
}, 1000);
Of course best solution some jumbutron from jquery plugin or boostrap
Brennan Macaig
Updated on September 13, 2020Comments
-
Brennan Macaig over 3 years
I have a
div
that fills the entirety of a page (portfolio style). Thediv
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 thediv
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
-
Yogi about 8 yearsYou mean like Bootstrap Carousel?
-
Rob about 8 yearsPossible duplicate of Change background-image of a div with fade effect every 10 seconds with jquery
-
-
fnune about 8 yearsGlad to help. The script on the answer below also works.