元ネタは、mixi の ASP.NET コミュにある質問。

複数枚の、動的に生成される画像を、一定時間毎に切り替えて、アニメーションのように表示したい、とのこと。出遅れたので、ここに書いておく。

表示したいところ
<div style="position:relative;">
    <p style="position:absolute; top:0; left:0; display:none;" id="p1">あいうえお</p>
    <p style="position:absolute; top:0; left:0; display:none;" id="p2">かきくけこ</p>
    <p style="position:absolute; top:0; left:0; display:none;" id="p3">さしすせそ</p>
</div>

面倒なので文字列にする。

まず、div で囲む。このとき、style で position を relative にする。こうすることで、この中の要素の absolute 指定が、この要素の座標を基準にすることになる。

表示するものは、まずは display を none にしておく。これで表示されない。そして、id として、同じ文字列に序数をつけたものを指定する。これで、後から検索しやすくなる。

JavaScript
<script language="javascript">
<!--
    var cnt = 1;
    function parapara() {
        for (i = 1; i <= 3; i++) {
            var pid = "p" + i;
            var cntrl = document.getElementById(pid);
            if (cntrl != null) {
                if (i == cnt) {
                    cntrl.style.display = "block";
                } else {
                    cntrl.style.display = "none";
                }
            }
        }
        cnt++;
        if (cnt > 3) {
            cnt = 1;
        }
        setTimeout(parapara, 1000);
    }
    setTimeout(parapara, 1000);
    // -->
</script>

cnt が、何番目を表示するかを保持する。for 文でぶん回して、片っ端から display を変更していく。このとき、ループの回数と cnt が同じものは block に。違うものは none にする。

cnt をインクリメントして、用意している最大数だったら最小数に戻す。最後にもう一度呼ばれるようにタイムアウトを設定する。

mixi の方には AJAX を利用したり、reload させて．．．という案で進んでいたのですが、そうすると表示を変えるタイミングで通信が発生します。もちろん、セッションを保つという大きな効用もあるのですが、それよりも、セッションが切れないことをセキュリティ リスクと考えました。また、ネットワークに余計な負荷をかけることもないかと思います。