Mam div, który wypełnia całą stronę (styl portfolio). div ma ten styl:Jak zmienić obraz tła co X sekund?

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

Zasadniczo, co chcę zrobić, to co X sekund zmienić url że div punkty za to tło obrazu, ale jestem pewien, w jaki sposób to zrobić.

Moja markup aktualnie wygląda tak:

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

Jaka jest najprostsza najlepszym rozwiązaniem/tutaj?

Dzięki!

Edycja: używam Bootstrap 3 Jeśli biblioteka JS czyni coś łatwiej

Źródło

2016-05-15 Brennan Macaig

Masz na myśli [Bootstrap Karuzela] (http://getbootstrap.com/ javascript/# carousel)? – Roberto

Możliwy duplikat [Zmień tło-wizerunek elementu div z efektem zanikania co 10 sekund z jquery] (http://stackoverflow.com/questions/5507518/change-background-image-of-a-div-with-fade- efekt-every-10-sekund-z-jquery) – Rob

Złóż tablicę z obrazami, które chcesz używać:

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

pobraniu div którego tło, które chcesz zmienić:

Możesz teraz użycie setInterval zmienić adres URL obrazu tła co drugi (lub bez względu na przerwy chcesz):

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

Oto żywy przykład: https://jsfiddle.net/vvwcfkfr/1/

pewne ulepszenia za pomocą programowania funkcyjnego, ES6 i 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/

Źródło

2016-05-15 19:59:17

Dzięki! Działa to świetnie! –

Cieszę się, że mogę Ci pomóc. Działa również skrypt z poniższej odpowiedzi. –

Gdybym corect underestand problemu chcesz somthink jak 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);

Oczywiście najlepszym rozwiązaniem niektóre jumbutron z jQuery plugin lub boostrap

Źródło

2016-05-15 20:00:35

Jak zmienić obraz tła co X sekund?

Odpowiedz

pewne ulepszenia za pomocą programowania funkcyjnego, ES6 i recursiveness:

Powiązane problemy