innerHTMLによるアニメーションGIFの表示について
おたずねします。
３つのアニメーションGIFを順に表示させて、最後まで行くと最初の画像に戻るように記述しました。
サンプルページURL
http://oreryu.sakura.ne.jp/sample/gif_out.html
IE6.0では問題ないのですが、Firefox2.0で表示すると、
2周目以降の表示がおかしくなります。
具体的には各アニメーションの最後のフレームが指定時間表示され、
次の画像に遷移するので、全くアニメーションが行われません。
また、どの画像で不具合が起こるかが限定されないようです。
ブラウザの問題かと思い、
キャッシュしない記述なども試しましたがうまくいきませんでした。
外部javascriptのソース
banner= new Array();
banner[0]=('<a href="#"><img src="1-1.gif" alt="" width="375" height="125" border="0"></a>');
banner[1]=('<a href="#"><img src="2-1.gif" alt="" width="375" height="125" border="0"></a>');
banner[2]=('<a href="#"><img src="3-1.gif" alt="" width="375" height="125" border="0"></a>')
time= new Array();
//バナーの表示時間 上から表示順
time[0]=(5000);
time[1]=(5000);
time[2]=(5000);
var menu=0;
function bchange(){
document.getElementById('banner_change').innerHTML=(banner[menu]);
timerID = setTimeout("bchange()",time[menu]);
if(menu == banner.length-1){
menu=0;
}else{
menu++;
}
}
HTMlファイルのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script language="javascript" type="text/javascript" src="banner_chg.js"></script>
</head>
<body>
<span id="banner_change">
<script language=javascript>
<!--
bchange();
//-->
</script>
</span>
</body>
</html>
できれば上記のinnerHTMLを使用してタグを書き換えるやり方で、
正常に表示できる方法を探しています。
御存知の方がいれば教えてください。
よろしくお願いいたします。
お礼
none=動かさない once=1度だけ動かす normal=ループ となっているんですね。 参考になりました。回答ありがとうございました。