- ベストアンサー
プログラムを使って複雑な画像変更を行う方法
- プログラムを使用して、クリックすると画像が次々と変わる機能を作りたいです。
- 画像の枚数が増えたり、複雑な動作を作る場合、プログラムの構造が複雑になってしまいます。
- フラッシュを使用せずに、プログラムだけで同じ位置で画像を変える方法を探しています。
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
指定した順に画像を変えたいということでしょうか？ こんなんではどうでしょうか？（配列で指定した分だけ順に変わる） （インデントは全角空白になっています） function changer(image, n){ if(n==undefined) n = 0; document.images[0].src = image[n++].src; if(n<image.length) setTimeout(function(){ changer(image, n); }, 100); } 呼び出しは、 onclick="changer([img1,img2,img3,img2,img1])" みたいな感じ。 表示の時間も変えたければ、画像の変数とペアで指定すれば可能かと。 複雑になると、HTMLソースが長くなるのが嫌なら、別に paternA = [img1,img2,img3,img2,img1]; などと定義しておいて、HTMLでは onclick="changer(paternA)" とか。 いろいろなpaternを配列にあらかじめセットしておいて、 onclick="changer(1)" みたいなのでもいけそう。 というか、そのまえに img1、img2、img3 などを配列にするのが先なのかも。 ついでに… ＞ var img1.src = "sample1.gif"; ＞ var img2.src = "sample2.gif"; ＞ var img3.src = "sample3.gif"; の部分はvar宣言しちゃってはダメでは？
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
<script type="application/javascript; version=1.8"> const ImageLoader = (function (src) let (i = new Image) (i.src = src, i)); //いまいち const ImageChanger = (function (target, images, sno) (function () target.src = images[(sno < images.length) ? sno++: (sno = 0)].src)); var images = ['sample1.gif', 'sample2.gif', 'sample3.gif'].map (ImageLoader); var changer = ImageChanger (document.querySelector ('img'), images, 0); setInterval (changer, 100); </script> もし、さしつかえなければ、しつもんをりかいしたところで、とじてもらえないだろうか。 （まだ、かいけつしていないのだろうかと、なんどとなくみてしまう。）
- shiren2
- ベストアンサー率47% (139/295)
あんまり美しくないですがこんな感じですかね。 インデントは全角スペースになっています。 <html> <head> <script type="text/javascript"> function imageChange(img, i){ // 初期値 if(i == undefined) i = 1; // 終了条件 if(3 < i) return; // sample1.gif img.src = "sample" + i + ".gif"; // インクリメントして再実行 setTimeout(function(){ imageChange(img, i+1) }, 2000); } </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="imageChange(this)" /> </body> </html>
