ボタンをクリックすると3つの画像の間でJavaScriptが切り替わります

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
      var trafficlights = ['redlight.png','yellowlight.png','greenlight.png']; 
      var num = 1 

      function lightsequence() { 
       document.getElementById('light').src = trafficlights[num]; 
       num = num + 1; 
      } 
     </script> 
    </head> 
    <body> 
     <img id="light" src="redlight.png"> 
     <button onclick="lightsequence()">Change Lights</button> 
    </body> 
</html>

私はボタンをクリックするたびに1つずつ順番に画像が変化しますが、私が保つとその順序を逆にする方法は考えられませんクリックするたびに、信号が赤、黄、緑、黄、赤などに変わります。私はjQueryに慣れていないので、理想的には使用したくないのですが、誰かがjQueryを使ってそれを完全に説明できるのであれば、それは必要です。ボタンをクリックすると3つの画像の間でJavaScriptが切り替わります

出典

2016-10-07 MATTHEW PARKER

Modulo operatorは、そのような場合に非常に便利です：これは正常に動作しますが、私が望むよう赤件まで戻っgrennからジャンプ

var trafficlights = [ 
 
\t 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png', 
 
\t 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png', 
 
\t 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png' 
 
]; 
 
var num = 1 
 

 
function lightsequence() { 
 
    document.getElementById('light').src = trafficlights[num++ % trafficlights.length]; 
 
}

<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"> 
 
<button onclick="lightsequence()">Change Lights</button>

出典

2016-10-07 14:00:04 dfsq

：ここ

document.getElementById('light').src = trafficlights[num++ % trafficlights.length];

はデモですそれは黄色を経て赤色に戻るように変更する –

ええ、私はそれを固定しました。ちょうど別の黄色の画像を最後に追加しなければなりませんでした可変コンテナ –

私はコードにこれを行って元の問題を修正しましたが、ボタンをクリックするたびに自動的にライトシーケンスを実行し、赤色で少し長くポーズする方法があるかどうかを知りたい他の色？ –

ボタンをクリックすると3つの画像の間でJavaScriptが切り替わります

答えて

関連する問題