如何使用JavaScript自動更改HTML圖像

注意：對於如何更改計時器上的圖像，我曾經看過here，與使用按鈕相反，但它不符合我的代碼風格。如何使用JavaScript自動更改HTML圖像

因爲我是新來的HTML和JS，我仍然不明白所有方面，並對他們在翻譯我所寫的代碼時指向哪個部分有些困惑。

CODE：

<!DOCTYPE html> 
<html> 
    <body> 
    <img id="image" src="blank_light.jpg" style="width:100px"> 
    <p></p> 
    <button class="change-image">Change Lights</button> 
    <script> 
     var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"] 
     var buttons = document.getElementsByClassName("change-image")[0]; 
     var index = 0; 

     buttons.addEventListener('click', function() { 
     if (index === imageSources.length) { 
      index = 0; 
     } 
     document.getElementById("image").src = imageSources[index]; 
     index++; 
     }); 

    </script> 
    </body> 
</html>

我需要刪除的按鈕，並有圖像改變一個定時基礎來代替。理想情況下每2秒鐘一次。

在此先感謝。

來源

2017-02-02 freddie.bumder

這是他張貼的問題相同的鏈接，這是不一樣的問題 –

@ ACOMIT001像馬蒂亞好心的說，這是一個不同的問題，因爲我發佈的鏈接與我的原始格式不同。如果我不明白它的意思，寫一堆代碼是毫無意義的。 –

您需要使用setInterval函數每2秒

<img id="image" src="blank_light.jpg" style="width:100px"> 
<p></p> 

<script> 

var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"] 

var index = 0; 
setInterval (function(){ 
    if (index === imageSources.length) { 
    index = 0; 
    } 
    document.getElementById("image").src = imageSources[index]; 
    index++; 
} , 2000); 

</script>

CodePen後改變形象：http://codepen.io/anon/pen/zNWMJK

來源

2017-02-02 13:38:22

@asdf_enel_hak非常感謝你們兩位。我是否正確地說我可以刪除<(/)button> –

圖像卡在第一個上，根本沒有改變？有任何想法嗎。請隨時校對代碼，銘記我最初複製並將您的工作粘貼到記事本，看看它是否工作。 –

@ freddie.bumder：沒有得到你。它工作與否？ –

如何使用JavaScript自動更改HTML圖像

回答

相關問題