Animation

単純にアニメーションをするだけなら animation gif を使うと簡単です。
animation gif の描画は 3枚の画像を描画 を参照して下さい。

【Source Code】
<script type="text/javascript">
<!--
imgnum = 5;     //画像の枚数
images = new Array();
for(i=0; i<imgnum; i++)
{   images[i] = new Image();
    images[i].src = "../img/dog"+i+".gif";
}
function change(imgno)
{   clearTimeout(timerID);
    if (imgno<images.length)
    {   document.anime.src= images[imgno].src;
        timerID = setTimeout("change("+(imgno+1)+")",100);
    }
    else
    {   timerID = setTimeout("change(0)",100);
    }
}
// -->
</script>
</head>

<body onload="timerID=setTimeout('change(0)',100)">
<h2>Animation</h2>

<img src="../img/dog0.gif" name="anime">

<body> の onload から setTimeout で change() 関数を呼び出します。
100 はアニメーションの速度です。
img タグで一枚目の画像(dog0.gif)を表示します。
name="anime" を設定して下さい。
<body onload="timerID=setTimeout('change(0)',100)">
<img src="../img/dog0.gif" name="anime">

<head> で images に画像をプレロードします。
"../img/dog0.gif" ~ "../img/dog4.gif" の画像を読み込みます。
"../img/dog" + i + ".gif" の「+」は文字列の連結演算子です。
<script type="text/javascript">
<!--
imgnum = 5;     //画像の枚数
images = new Array();
for(i=0; i<imgnum; i++)
{   images[i] = new Image();
    images[i].src = "../img/dog"+i+".gif";
}

イメージを切り替える change() 関数です。
タイマー設定で呼び出されます。
document.anime.src は <img src="../img/dog0.gif" name="anime"> で name に "anime" が設定されたリソースです。
このリソース(画像)を images[imgno].src に切り替えます。
imgno は change() 関数が呼ばれる毎にアップし、images.length になるとゼロに戻ります。
change() 関数の中から再び setTimeout() で change() 関数を呼び出しています。
これにより画像を切り替えながらアニメーションが描画されます。
"dog0.gif" ~ "dog4.gif" は透過 GIF では無いので、画像の周辺が白くなっています。
function change(imgno)
{   clearTimeout(timerID);
    if (imgno<images.length)
    {   document.anime.src= images[imgno].src;
        timerID = setTimeout("change("+(imgno+1)+")",100);
    }
    else
    {   timerID = setTimeout("change(0)",100);
    }
}
// -->
</script>

プレロードしないで、もっと簡単にアニメーションします。
定期的に切り替えるときは setTimeout() よりも setInterval() の方が便利です。
setInterval('change()',100) で 100 ミリ秒ごとに change() 関数を呼び出します。
従って change() 関数の中から再び change() 関数を呼び出す必要はありません。
change() 関数では imgnum を次の画像番号に設定して document.anime.src に画像の名前を設定します。
【Source Code】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animation</title>

<script type="text/javascript">
<!--
imgcnt = 5;     //画像の枚数
imgnum = 0;     //表示する画像番号
function change()
{   imgnum = (imgnum+1)%imgcnt;
    document.anime.src="../img/dog"+imgnum+".gif";
}
// -->
</script>
</head>

<body onload="timerID=setInterval('change()',100)">
<img src="../img/dog0.gif" name="anime">

</body>
</html>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)