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

解決済

質問者：whosfoo
質問日時：2010/12/30 16:48
回答数：2件

javascript初心者です。

↓下記のように画像がsetTimeoutで切り替わるスクリプトを書いているのですが、
http://foofoo77.web.fc2.com/imagechange/index6b. …
このページの記述では、後読みの方の右側は動いているのですが、左側は動きません。
この処理を同一ページ内の二箇所でしたいのですが、どのようにすればいいでしょうか？

制約としては
二箇所を同じ関数を使ってそれぞれ違う引数を与えるのみで動かさなければなりません。
画像を変更する要素の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： my--
回答日時：2010/12/30 21:18

質問のソースコードがなぜ動かないのかはコードを比較して判断頂くとして。

この場合、カウンタ変数（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>