複数のjavascriptを貼り付けると、1つしか動きません。

質問

「5秒ごとに残像を残しながら自動で画像が変わるスクリプト」を以下の通り作成いたしました。
これが1つだったら起動するのですが、2つ以上貼り付けると最後に貼り付けたスクリプトしか起動しません。
画像、IDを変えるなどして試しているのですが、上手くいきません。
解決策がわかる方ご教授をお願いいたします。

<script type="text/javascript">
var nimgs = new Array();
nimgs[0] = "syasin/1/1/k1.jpg";
nimgs[1] = "syasin/1/1/k2.jpg";
nimgs[2] = "syasin/1/1/k3.jpg";
nimgs[3] = "syasin/1/1/k4.jpg";
nimgs[4] = "syasin/1/1/k5.jpg";
nimgs[5] = "syasin/1/1/k6.jpg";
nimgs[6] = "syasin/1/1/k7.jpg";
nimgs[7] = "syasin/1/1/k8.jpg";
nimgs[8] = "syasin/1/1/k9.jpg";
nimgs[9] = "syasin/1/1/k0.jpg";
i = 0;
function Blend(imgframe){
document.getElementById("imgframe").filters.blendTrans.apply();
document.all.item("imgframe").src = nimgs[i++];
document.getElementById("imgframe").filters.blendTrans.play();
if(i>=nimgs.length) i=0;
};
onload = function(imgframe){setInterval(Blend,5*1000)}
</script>
<IMG src="syasin/1/1/k0.jpg" id="imgframe" style="filter:blendTrans(duration=2);" width="218" height="218">

回答No.1

fujillin · ベストアンサー

＞2つ以上貼り付けると最後に貼り付けたスクリプトしか起動しません。
どのような『貼り付け方』（？）をしているのかわかりませんが、想像するところ…スクリプトタグ内の
onload = function(imgframe){setInterval(Blend,5*1000)};
を、複数記載していませんか？（imgframeの名は変えているにしても…）
onloadが干渉している場合は、最後のものが有効になるようです。

あと、変わる画像はみな同じ画像でよいのでしょうか？
nimgsがグローバル変数になっているので、複数の画像が対象でも、変わる内容はみな同じ画像になってしまう。
また、Blend(imgframe)　はimgframeを引数としていますが、関数内で使用されているのは、"imgframe"決め打ちになっているので、引数の役割を果たしていません。
もっとも、呼び出し側でも引数を使って呼び出していないみたいだけど…

複数を対象にするなら、最初からそのように作成し直したほうがよさそう。

ついでながらfiltersはIE独自機能なので、他のブラウザだと何も起きないと思いますが…

お礼

無事に解決しましたありがとうございます！

ちなみに↓に作り変えました。

<!--
var time=3;
var rtime=5000;
var image= new Array();
image[0]='syasin/1/1/k0.jpg';
image[1]='syasin/1/1/g3.gif';
image[2]='syasin/1/1/k0.jpg';
image[3]='syasin/1/1/k1.jpg';
image[4]='syasin/1/1/k2.jpg';
image[5]='syasin/1/1/k3.jpg';
image[6]='syasin/1/1/k4.jpg';
image[7]='syasin/1/1/k5.jpg';
image[8]='syasin/1/1/k6.jpg';
image[9]='syasin/1/1/k7.jpg';
image[10]='syasin/1/1/k8.jpg';
image[11]='syasin/1/1/k9.jpg';
image[12]='syasin/1/1/k10.jpg';
image[13]='syasin/1/1/k11.jpg';
image[14]='syasin/1/1/k12.jpg';
image[15]='syasin/1/1/k13.jpg';
image[16]='syasin/1/1/k14.jpg';
var ii=0;
function imgchange1(){
imgframe1.filters.blendTrans.Apply();
imgframe1.filters.blendTrans.duration=time;
imgframe1.src=image[ii];
imgframe1.filters.blendTrans.Play();
ii=ii+1;
if (ii>16) ii=0;
t=setTimeout('imgchange1()',rtime);
}
//-->
</SCRIPT>

onloadを＜body＞に別々に作ったら動きました。