如何每x秒更改引導程序標題圖像？

我正在設計一個基於bootstrap的網站。我有一個導航欄，下面有一個全屏幕背景圖像。我想在幾秒鐘後更改背景圖片。該圖片位於標題標籤內，並在中間有一些文字。爲報頭的代碼： -如何每x秒更改引導程序標題圖像？

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

我嘗試的時間間隔後的類屬性改變，但它沒有工作。

我想改變標題的背景圖像讓我們說每10秒後2.jpg，然後3.jpg，然後回到1.jpg使用普通的JavaScript。請提供一種方式，因爲我無法想象改變圖像的方式。如果有人能幫忙，我將非常感激。

來源

2017-01-02 Kartikey Vishwakarma

你需要jQuery。你沒有嘗試先找到/嘗試什麼？ –

@ Fred-ii-我不想使用jquery或任何其他插件。有沒有辦法用純JavaScript來做到這一點。我嘗試過的js更新了正文。 –

這個答案http://stackoverflow.com/a/14290726/1415724包含純JS中的任何特殊原因，你不想使用jQuery？這是另一個http://stackoverflow.com/q/31769667/1415724 –

這將照顧你在找什麼，假設你的圖像是用數字命名的。

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

來源

2017-01-02 19:49:46 Andrew

非常感謝它的工作。 –

如何每x秒更改引導程序標題圖像？

回答

相關問題