Wie ändert man das Bild des Bootstrap-Headers alle x Sekunden?

Question

Ich entwerfe eine bootstrap-basierte Website. Ich habe eine Navigationsleiste und darunter befindet sich ein Vollbild-Hintergrundbild. Ich möchte das Hintergrundbild nach einigen Sekunden ändern. Das Bild befindet sich in einem Header-Tag und hat einen Text darüber in der Mitte. Der Code für Header: -

<header id="image"> 
    <div class="header-content"> 
     <h1>Hello</h1> 
    </div> 
</header> 

Die CSS für Header: -

header { 
position: relative; 
width: 100%; 
min-height: auto; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
background-position: center; 
background-image: url('images/1.jpg'); 
text-align: center; 
color: white; 
} 
.header1 {background-image: url('images/1.jpg');} 
.header2 {background-image: url('images/2.jpg');} 
.header3 {background-image: url('images/3.jpg');} 

Die Javascript Ich habe versucht: -

<script type="text/javascript"> 
function run(interval, images) { 
var int = 1; 

function func() { 
    var d = document.getElementById("image"); 
    d.className += "header"+int; 
    int++; 
    if(int === images) { int = 1; } 
} 

var swap = window.setInterval(func, interval); 
} 

run(5000, 3); 
</script> 

Ich habe versucht, die Klasseneigenschaft nach einem Intervall zu ändern, aber es hat nicht funktioniert.

Ich möchte das Hintergrundbild des Headers ändern, sagen wir nach 10 Sekunden zu 2.jpg und dann zu 3.jpg und dann zurück zu 1.jpg mit plain javascript. Bitte geben Sie einen Weg an, da ich nicht in der Lage bin, eine Möglichkeit zu finden, das Bild zu ändern. Ich wäre sehr dankbar, wenn jemand helfen könnte.

Answer 1

Dies wird sich um das kümmern, was Sie suchen, vorausgesetzt, dass Ihre Bilder mit Ziffern benannt sind.

var counter = 1; //instantiate a counter 
var maxImage = 5; //the total number of images that are available 
setInterval(function() { 
    document.querySelector('header').style.backgroundImage = "url('images/" + (counter + 1) + ".jpg')"; 
    if (counter + 1 == maxImage) { 
     counter = 0; //reset to start 
    } else { 
     ++counter; //iterate to next image 
    } 
}, 10000);