WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:Javascriptでランダム画像を一定時間ごとに入れ替えるには?

0:[投稿] にの [2006/06/27 09:04 ] [環境:Firefox1.5x,win2000 わかりません]

初めて投稿させていただきます。
皆様のお知恵を拝借できれば幸いです。

目指している動作は以下の通りです。
(1)16枚ある画像をシャッフルして5枚(必ず重複しない)取り出し、表示させる。
(2)(1)を一定時間ごとに繰り返す。

1回は画像が入れ替わるのですが、それ以降「オブジェクトを指定して下さい」のエラーが出て止まってしまいます。
writeTag()の中でsetTimeoutを使ってもう一度writeTag()を呼び出せば繰り返し処理できると考えたのですが...。

ソース
<html>
<head>
<title>シャッフル</title>
<script language="JavaScript"><!--
function writeTag(){
    data = new Array();
    for (i=0; i<16; i++) data[i] = i; //16は画像の枚数
    for (i=0; i<50; i++) // 50はシャッフルする回数
    {
        n1 = Math.floor(Math.random() * 16); //16は画像の枚数
        n2 = Math.floor(Math.random() * 16); //16は画像の枚数
        n = data[n1];
        data[n1] = data[n2];
        data[n2] = n;
    }
    // 結果表示
    for (i=0; i<5; i++) document.write('<img src="bann_'+data[i]+'.jpg"><br>');
    setTimeout("writeTag()",2000);
    //iは表示する画像の枚数
}
// --></script>
</head>
<body>
<script>
<!--
writeTag()
//-->
</script>
</body>
</html>


1:[回答] かんな [2006/06/27 17:06 ][URL]

それはdocument.write()した時点で、ページの内容が更新されているからですよ。一回ページが書き換えられると、writeTag()が見つからなくなって、エラーを返すのです。


2:[回答] m035 [2006/06/27 23:28 ][URL]

現状のソースをそのまま使いたければ、一定時間後に
location.reload()

location.href=location.href;
すればリロードされて一応は動作しているように見えます。
リロードしたくない場合は、writeTag()内で2回目以降の呼び出しであることを変数などで判断して、document.writeせず、書き出されたimgのsrcを変更するようにしてやればいいはずです。
もしくは書き出されたimgのsrcを変更する関数をsetTimeoutで一定時間毎に呼び出せばできるでしょう。


3:[完了] にの [2006/06/29 09:02 ]

かんなさん、m035さん、ご回答ありがとうございました。
document.write()でページの内容が更新されている点は、画像のみ表示させるサンプルでは気付きませんでした。ご指摘ありがとうございます。
setTimeout("writeTag()",2000);

setTimeout("location.reload()",2000);
に変えたら意図どおりに動作しました。感激です!
ただ、リロードは処理が重くなるようなので、教えていただいた「imgのsrcを変更する」方法も試してみようと思います。

本当にありがとうございました!

回答(必須): 状態:

お名前(必須):

URL:




[戻る]