x秒ごとにブートストラップヘッダーイメージを変更するには？

Question

私はブートストラップベースのウェブサイトを設計しています。私にはナビゲーションバーがあり、その下にフルスクリーンの背景画像があります。私は数秒後に背景画像を変更したい。イメージはヘッダータグの内側にあり、中央にテキストがあります。ヘッダーコード： -

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

ヘッダのCSS： - 私が試し

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');} 

のjavascript： -

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

I間隔の後にクラスプロパティを変更しようとしたがそれはうまくいかなかった。

ヘッダーの背景イメージを変更して、10秒ごとに2.jpgに、次に3.jpgに、次にプレーン・ジャバスクリプトを使用して1.jpgに戻すようにします。私はイメージを変更する方法を考えることができないので、方法を提供してください。誰かが助けることができれば非常に感謝しています。

Answer 1

これは、あなたの画像の名前が数字であると仮定して、あなたが探しているものの世話をします。

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);