如何通過單個按鈕循環瀏覽圖像？

我剛剛開始在GCSE級別的記事本++中編寫javascript代碼。我評估中的一項任務是讓交通燈改變顏色，每按一下按鈕一個圖像。我已經儘可能讓紅燈變成紅黃燈。但是，我無法繼續這樣做。到目前爲止我的代碼：如何通過單個按鈕循環瀏覽圖像？

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function lewis() { 
    document.getElementById("pic").src="Red-Yellow.png" 
} 
</script> 
</head> 
<body> 
<button type="button" onclick="lewis()"> 
Change Lights</button> 
<img src="Red.png" alt="Red" id="pic" style="width:250px;height:600px;"> 
</body> 
</html>

這是我的能力的高度，我纔剛剛開始。任何幫助將不勝感激，千恩萬謝，劉易斯

（我會繼續做研究一起這一問題）

來源

2016-02-03 Lewis Allen

你意識到java和javascript不是一回事，對不對？ – Neil

添加if語句來檢查當前值，或者將它們添加到數組中，以便您可以轉到nextIndex – Stultuske

我想到的一些方法： - 使用索引並在每個按鈕上遞增 - 按下一些if語句檢查圖像名稱並決定下一張圖像 - 單擊時更換按鈕或至少點擊onclick事件。 – Thomas

沒有測試，但我猜你想這樣的事情。

function lewis() { 
     var current_image = document.getElementById("pic").src; 
     if(current_image == "Red.png"){ 
      document.getElementById("pic").src = "Red-Yellow.png"; 
     }else if(current_image == "Red-Yellow.png"){ 
      document.getElementById("pic").src = "Red-Green.png"; 
     }else if(current_image == "Red-Green.png"){ 
      document.getElementById("pic").src = "last-color.png"; 
     }else if(current_image == "last-color.png"){ 
      document.getElementById("pic").src = "Red.png"; 
     } 
    }

來源

2016-02-03 10:31:43

謝謝，我會嘗試下一課<3 –

是我的答案解決了您的問題 –

我還不確定，字面意思是要嘗試，會讓你在循環<3 –

如何通過單個按鈕循環瀏覽圖像？

回答

相關問題