JavaScript006 画像クリック時に順番にループするよう切り替える
画像クリック時に順番にループするよう切り替える
html
<!-- 省略 --> <script> //配列準備 var Images = new Array(); Images[0] = new Image(); Images[0].src = "img/p1_300.jpg"; Images[1] = new Image(); Images[1].src = "img/p2_300.jpg"; Images[2] = new Image(); Images[2].src= "img/p3_300.jpg"; Images[3] = new Image(); Images[3].src= "img/p4_300.jpg"; Images[4] = new Image(); Images[4].src= "img/p5_300.jpg"; var cnt=0; //メソッド function changeImage(){ if(cnt==4){cnt=0;}else{cnt++;} document.getElementById("gazo").src = Images[cnt].src; console.log('現在のImage配列の値(変数cnt)：'+cnt); } </script></head> <body> <h1>画像クリック時に５枚の画像が順番にループして切り替わる表示を行う。</h1> <p>[動物園]</p> <img id="gazo" onclick="changeImage()" src="img/p1_300.jpg" alt="randomImage"> </body></html>
参考サイト
画像を切り替える－JavaScript入門
