Come cambio l'immagine di sfondo ogni X secondi?

Question

Ho un div che riempie l'interezza di una pagina (stile portfolio). Il div ha questo stile:

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

In sostanza, quello che voglio fare è ogni X secondi cambiano le url che le div punti per esso immagine di sfondo è, ma io sono sicuro su come fare questo.

mio markup attualmente si presenta così:

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

Qual è la soluzione più semplice/migliore qui?

Grazie!

Edit: sto usando Bootstrap 3 se la libreria JS rende nulla facile

Answer 1

Fare una matrice con le immagini che si desidera utilizzare:

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

Abbiamo recuperare il div cui sfondo che si desidera modificare:

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

È ora possibile uso setInterval per cambiare l'URL dell'immagine di sfondo ogni secondo (o qualsiasi intervallo desiderato):

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

Ecco un esempio: https://jsfiddle.net/vvwcfkfr/1/

Alcuni miglioramenti utilizzando programmazione funzionale, ES6 e ricorsività:

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

Se mi corect underestand il problema che si desidera somthink come 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); 

Naturalmente migliore soluzione certa jumbutron dal plugin per jQuery o boostrap