一定時間で画像を変更するスクリプトの関数について

2010/12/30 16:48

このQ&Aのポイント

Javascript初心者の方が、一定時間で画像を変更するスクリプトの関数について質問されています。
質問者は、特定のページのスクリプトでは一部動かない箇所があるため、同じ関数を使って二箇所で処理する方法を知りたいと述べています。
質問者は、画像を変更する要素のidの値を引数として関数を呼び出していることを説明し、同じ関数を使って二箇所で処理することができるのかどうかについて質問しています。

一定時間で画像を変更するスクリプトの関数について

javascript初心者です。 ↓下記のように画像がsetTimeoutで切り替わるスクリプトを書いているのですが、 http://foofoo77.web.fc2.com/imagechange/index6b.html このページの記述では、後読みの方の右側は動いているのですが、左側は動きません。この処理を同一ページ内の二箇所でしたいのですが、どのようにすればいいでしょうか？制約としては二箇所を同じ関数を使ってそれぞれ違う引数を与えるのみで動かさなければなりません。画像を変更する要素のidの値を引数としています。同一関数を使って二箇所を処理するのは無理なのでしょうか？ソースは下記のようになります（上部URLと同じものです）。お分かりになる方いらっしゃいましたら、ご回答よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一定時間で変わる画像</title> <script type="text/javascript">  </script> </head> <body> <img src="images/image1.gif" name="animation" height="500" width="500" id="bb"> <script type="text/javascript"> preLoad('image'); change('bb'); </script> <img src="images/imageb1.gif" name="animation" height="500" width="500" id="cc"> <script type="text/javascript"> preLoad('imageb'); change('cc'); </script> </body> </html>

whosfoo
お礼率77% (21/27)

JavaScript
回答数2
ありがとう数9

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

my--
ベストアンサー率89% (91/102)

2010/12/30 21:18 回答No.2

質問のソースコードがなぜ動かないのかはコードを比較して判断頂くとして。この場合、カウンタ変数（j, fnum）を共有する、とちと面倒なことになりますよね。与えられた引数（id）を使って各々にカウンタ変数（プロパティ）を持たせてやればいいんじゃないでしょうか。 var animeImg = {}; //画像プリロード function preLoad(ch) { 　var img; 　for (var i = 0; i < 5; i++) { 　　img = new Image(); 　　img.src = "images/" + ch + i + ".gif"; // 0 ～ 4.gif（0 から始まる数値に変更しています）　} 　// 与えられた引数を使いカウンタ用プロパティを設定　animeImg[ch] = { j: 0, fnum: 0 }; } //時間制御 var wait = new Array( 3000, 3000, 3000, 500, 500, 500, 500, 500, 3000 ); //表示画像制御 function change(ch) { 　var obj = document.getElementById(ch); 　var data = animeImg[ch]; 　obj.src = "images/" + ch + data.j + ".gif"; 　data.j++; 　if (data.j > 4) { 　　data.j = 0; 　} 　if (data.fnum < 4) { 　　data.fnum++; 　} else { 　　data.fnum = 0; 　} 　var wtime = wait[data.fnum]; 　//console.log(wtime); 　setTimeout(function() { change(ch); }, wtime); } <img src="images/image0.gif" id="image"> <script type="text/javascript"> preLoad('image'); change('image'); </script> <img src="images/imageb0.gif" id="imageb"> <script type="text/javascript"> preLoad('imageb'); change('imageb'); </script>

質問者

お礼 2010/12/31 16:10

ご回答ありがとうございます。教えていただいたソースを元にして書いてみましたら、ばっちり希望通りの挙動をしました。与えた引数の各々に対してカウンタ変数を持たせなければいけなかったのですね。書き方などを含め、大変参考になりました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

metametamu
ベストアンサー率51% (153/295)

2010/12/30 20:22 回答No.1

getElementByIdを使われていますが、全てのDOMの読み込みが終わらない段階で実行されているため、期待した順番通りに処理がされていないのだと思います。 onload後に実行すれば動きませんか？ window.onload=function(){ preLoad('image'); change('bb'); preLoad('imageb'); change('cc'); }

質問者