javascript - JavaScriptを使用して画像を他の画像に変更し、最後の画像から最初の画像まで繰り返します

Question

ページ内の画像をクリックするとソースファイルの他の画像に変更され、それを繰り返し実行する（最後の画像が表示されたら、[クリック時に]最初の画像に再度移動する）リフレッシュせずに、javascript/htmlコードを変更したい.

Answer 1

以下のようなものを使用してこれを達成できますが、それを行う方法はたくさんあります。これを行う最も簡単な方法は、インクリメント変数を除いて画像名を同じにすることですが、それはあなた次第です。

<img id="myImage" src="image.jpg"/>
<input type="button" onclick="changeImage();" value="Change Image"/>
<script>
  //This array holds all my image paths (hardcoded)
  var images=new Array();
    images[0]="myImage.jpg";
    images[1]="myImage2.jpg";
    images[2]="myThirdImage.jpg";
  var counter=0;

  function changeImage(){
    //Change image and increment counter
    document.getElementById("myImage").src=images[counter++ % images.length];
  }
</script>

また、この機能をどのように機能させたいかによっても異なります (画像のリストを循環する左/右矢印の付いた画像)。

編集: mod の提案をしてくれたFizzに感謝します。