アニメーション/JavaScript

アニメーションはパラパラ漫画と同じ原理です。画像が瞬時に入れ替わることであたかも動いているような気がするのです。そんなことをJavaScriptでも可能になります。３枚の画像を、0.5秒ごとに入れ替えます。原画がヘタクソなので動いているようには見えませんが、皆様でお試しください。

Sample ←　サンプルはこちらから

あらかじめ同じサイズの３枚の画像を用意してください。ヘッダ部にスクリプトを記述します。

<script type="text/javascript">
<--
image1=new Image(); 
image1.src="banner1.gif";
image2=new Image(); 
image2.src="banner2.gif";
image3=new Image(); 
image3.src="banner3.gif";
function change()
{
  clearTimeout(timerID);
  if(document.anime.src==image1.src)
     document.anime.src=image2.src;
  else if(document.anime.src==image2.src)
     document.anime.src=image3.src;
  else
   document.anime.src=image1.src;
  timerID=setTimeout("change()",500);
}
//-->
</script>

<body onLoad="timerID=setTimeout('change()',500)">
<div class="body">
<img src="banner1.gif" name="anime" width="352 " height="95" alt="アニメ">
</body>

◆ アニメーション