javascript 複数画像の切り替え

javascript画像置換について質問です。
画像をクリックするたびに、5枚の画像をローテーション、domで表示させるプログラムを作ろうとしています。

考え方として、imgにonclickを持たせ、関数btnの中で画像5枚を、for文を使い表示させようとしているのですが、うまくいきません。
画像1枚の切り替えなら問題なくできたのですが、5枚の画像を回していくやり方が分か__イタリックテキスト__りません。
そもそもこのやろうとしている考え方であっているのでしょうか？
下記に途中経過のコードを載せてあります。
ちなみに、画像urlはimg1204/bike1.jpgの数字が5まであるといった感じです。
わかるかたいましたらアドバイスよろしくお願いいたします。

<body>
 <img id='pict' img src='img1204/bike1.jpg' onClick='btn()'>

<script>
	var img=document.getElementById('pict');
 function btn(){
		for(var i=1; i<5; i++){
		img.setAttribute('src','img1204/bike +i+ .jpg');
	 }
	}
</script>
</body>

行動規範の内容に同意します

回答4件

JavaScript
1var img = document.getElementById('pict');
2function btn() {
3  for(var i=1; i<5; i++) {
4    img.setAttribute('src','img1204/bike +i+ .jpg');
5  }
6}

問題を幾つかピックアップしました。

for文の2節目i<5、継続条件なので1～4までしか実行されない
setAttributeの第二引数'img1204/bike +i+ .jpg'、この書き方ではiが展開されず+i+という文字列が含まれた画像を探すことになる
そもそもこの書き方だと目にも留まらぬ速度で画像1～4が書き換わり、画像5しか表示されない

上2つを対応すると下記のようになります。（下は根本原因なので少々複雑なので別項で）

JavaScript
1var img = document.getElementById('pict');
2function btn() {
3  for(var i = 1; i <= 5; i++) {
4    img.setAttribute('src','img1204/bike' + i + '.jpg');
5  }
6}

残った根本対応ですが、クリックする度に変わってほしいんですよね？
ではこんなのはどうでしょう？

JavaScript
1var rotation_num = (function(){
2  var i = 1;
3  return function(){
4    i++;
5    if (i > 5) i = 1;
6    return i;
7  };
8})();
9var rotate = function(path, format) {
10  document
11    .getElementById('pict')
12    .setAttribute('src', path+rotation_num()+format);
13}

HTML
1<img src="" onclick="rotate('img1204/bike', '.jpg')" />

このrotation_numという関数を叩くと、
実行する度に2→3→4→5→1→…という風に数字をずらしながら返してくれます。
後は先程のiと同じような要領で当てはめてあげると解決します。

他は抽象化しやすいように多少私好みに弄ってます。

投稿2016/12/04 11:14

miyabi-sun

総合スコア21158

こういうことでしょうか？

JavaScript
1var pictureNo = 1; // グローバル変数なので、衝突しないように、長い名前にする
2    
3function btn() {
4    var img = document.getElementById('pict');
5    pictureNo = (pictureNo < 5 ? pictureNo + 1 : 1); // クリックされるごとに、pictureNoをインクリメントするが、5になると１に戻る
6    img.setAttribute('src','img1204/bike' + pictureNo + '.jpg');
7}

投稿2016/12/04 11:02

naomi3

総合スコア1105

画像を1回クリックした一瞬の間にfor文が回って5回画像を更新するプログラムになっていますね。これではbike4の画像が表示されるだけになってしまっているでしょう。。。

簡単に実現する方法としては、javascript内で現在の状態を保持する変数を用意して、クリックするたびに変数の更新と画像の更新を行うといった感じでしょうか。

Javascript
1<script>
2    var img=document.getElementById('pict');
3    var pictNumber = 0;
4    function btn(){
5        pictNumber  = (pictNumber + 1) % 5; //画像番号の更新
6        img.setAttribute('src','img1204/bike' + (pictNumber + 1) + '.jpg'); //表示画像の更新
7    }
8</script>