●一定時間で画像を交換することにより、狭い場所にたくさんの情報をのせることができ、人目を引くこともできます。交換する画像をうまく作ればアニメーションにすることもできます。
●ホームページ上のアニメーションは圧倒的にアニメーションgifが多いのですが、広告を切り替えるような用途では、JavaScriptもよく使われます。
●まず、例によって元の絵を BODY の中に img タグで貼り付けます。そこにはやはり、name="area1" と名前を付けます。この名前は任意ですがページ内で同じ名前があってはいけません。
<img src="images/img1.png" alt="" name="area1" >
●この画像を次々に換えるために anime() という関数を SCRIPT タグの中で次のように定義します。
<SCRIPTtype="text/javascript">
<!--
var n=3;
function anime(){
if ( n==1 ) {
document.area1.src = "images/img2.png";
n=2;
}else if ( n==2 ) {
document.area1.src = "images/img3.png";
n=3;
}else if ( n==3 ) {
document.area1.src = "images/img1.png";
n=1;
}
setTimeout("anime()",1000)
}
//-->
</SCRIPT>
●まず考え方をおおざっぱにつかんでください。現在の画像の番号を変数 n に記憶させ、n が１だったら２に換え、n が２だったら３に換え、n が３だったら１に換えるということを繰り返しているだけです。
●この繰り返しをさせているのは、「自動的に移動」でもでてきた setTimeout() 関数です。ここでは１秒たったら anime() という関数を実行するという命令になっています。1000というのが１秒のことです。
●anime() の中で anime() を呼び出すということで永遠に繰り返すことになっているわけです。
●画像が大きいときは参考資料の「スムーズに動かす」に従って画像を前もって取り寄せ（プリロード）した方がスムーズにいきます。しかし、このままでも３つの画像が読み込まれるまでは乱れますが、その後は問題ありません。
●永遠に自己を呼び出し続ける anime() ですが、最初に一回呼び出さなければ始まりません。これも「62.自動的に移動」でも使いましたが、<BODY>タグ内に onload の記述をしておくとページが表示されると同時にアニメーションが始まります。
<BODY onload="anime()">
●if や else if は次の（ ）内の条件によって次の｛ ｝内の命令を実行するかしないかを決定するものです。
if ( a ){ A } else if ( b ){ B } else if ( c ){ C }
は、ａ という条件では Ａ を実行し、ｂ という条件では Ｂ を実行し、、ｃ という条件では Ｃ を実行するということになります。
●ａｂｃやＡＢＣの内容は長くなるので、条件と実行内容の対応がわかりやすいように、次のような配置で書く習慣になっています。
if ( ａであるか ) { ａが成立したときに実行する内容。 }else if ( ｂであるか ) { ｂが成立したときに実行する内容。 }else if ( ｃであるか ) { ｃが成立したときに実行する内容。 }
「｛ 」や「 ｝」がとんでもないところにありますが、書き忘れないように。
●さて、次は条件ですが、ここでは ｎ が１であるか２であるか３であるかという３つの状態があり得ます。「ｎが１であるか」という条件は（ n == 1 ）と書きます。「＝」を２つ書くのは１かどうか調べるだけで、ｎに１を代入しないのだから、書き方も区別しようということでこのように決められています。
●n==1 が成立すれば、次の２つの命令が実行されます。
document.area1.src = "images/img2.png";
n=2;
画像の src を img2.png にして、ｎに２を代入します。今表示されている画像が２番目のものだと覚えておくわけです。ｎが２になりましたが、次の ( n == 2 )で実行される命令はやりません。次は一連の if 〜 else if の次の setTimeout の命令に移ります。
●この命令は「 anime() を 1000 ミリ秒（＝１秒）待ってから実行せよ」という意味になります。
setTimeout("anime()",1000)
●1000ミリ秒後にanime()が呼ばれたときは ｎ の値は２なので、今度は２つめの部分が実行されます。
document.area1.src = "images/img3.png";
n=3;
●このようにして繰り返していくことになります。