Wie ändere ich das Hintergrundbild alle X Sekunden?

Question

Ich habe eine div, die die gesamte Seite füllt (Portfolio-Stil). Die div hat diesen Stil:

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

Im Grunde, was ich alle X Sekunden tun möchte, ist, um die url dass die div Punkte ändern für seine Hintergrundbild, aber ich bin nicht sicher, wie dies zu tun.

Meine Markup sieht derzeit wie folgt aus:

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

Was hier die einfachste/beste Lösung ist?

Danke!

Edit: Ich bin mit Bootstrap 3, wenn die JS-Bibliothek etwas leichter

Answer 1

Machen Sie ein Array mit den Bildern, die Sie verwenden möchten macht:

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

Wir die div deren abrufen Hintergrund Sie möchten ändern:

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

Sie können jetzt Verwendung setInterval auf die URL Hintergrundbild ändern sich jedes zweite (oder was auch immer Intervall Sie wollen):

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

hier ein anschauliches Beispiel: https://jsfiddle.net/vvwcfkfr/1/

einige Verbesserungen mit der funktionalen Programmierung, ES6 und Rekursivität:

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/

Answer 2

Wenn ich corect underestand Ihr Problem, das Sie wie 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); 

Natürlich beste Lösung einige jumbutron von jQuery-Plugin oder Bootstrap