３．２つの画像が時間差で動きながら移動するアニメション

  <!-- HTML 表記 -->
<body  style="bgcolor:lightyellow;" onLoad="hyoji()">
<form>
<input type="button" value="Start" style="width:100px;" onClick="play1(),play2()" />
</form>
<img src="自転車画像のurl" id="jitensha" style="position:absolute;"> 
<img src="犬画像のurl" id="dog" style="position:absolute;">

<form>

</form>

//    JavaScript 表記
<script type="text/javascript">
<!--
//　＊＊＊　自転車画像８枚を配列に取得　＊＊＊
animeImage1=new Array(8);
for (var i=0;i<8;i++){
  animeImage1[i]=new Image();
  animeImage1[i].src="image/jitensha/jitensha"+(i+1)+".gif";
}

//　＊＊＊　犬の画像６枚を配列に取得　＊＊＊
animeImage2=new Array(6); 
for (var i=0;i<6;i++){
  animeImage2[i]=new Image();     
  animeImage2[i].src="image/dog/dog"+(i+1)+".gif";
}

//　＊＊＊　自転車の初期値位置設定　＊＊＊
current1=0;
posLeft_jitensha = 250;
posTop_jitensha = 30;

//　＊＊＊　自転車のアニメ開始する関数　＊＊＊
function anime1(){
  document.getElementById("jitensha").style.left = posLeft_jitensha;
  document.getElementById("jitensha").style.top = posTop_jitensha;
  document.getElementById("jitensha").src=animeImage1[current1].src;
  current1++;
  posLeft_jitensha += -4;
  if(current1==8){current1=0}
  if(posLeft_jitensha < 10){
     clearInterval(timer2); 
    }
}
function play1(){
  current1=0;
  posLeft_jitensha = 250;
  document.getElementById("jitensha").style.left = 250;
  document.getElementById("jitensha").style.top = 30;
  timer2=setInterval("anime1()",150);
}

//　＊＊＊　犬のアニメ開始　＊＊＊
current2=0;
posLeft_dog = 300;
posTop_dog = 80;
    　　　　　　　　　　    
function anime2(){             
  document.getElementById("dog").style.left = posLeft_dog;     
  document.getElementById("dog").style.top = posTop_dog;     
  document.getElementById("dog").src = animeImage2[current2].src;     
  current2++;
  posLeft_dog += -8;     
  if(current2==6){current2=0}     
  if(posLeft_dog < 10){
     document.getElementById("dog").src="image/dog/dog.gif";      
     clearInterval(timer);      
    }     
　}

function play2(){
  current2=0;
  posLeft_dog = 300;
  document.getElementById("dog").style.left = 300;
  document.getElementById("dog").style.top = 80;
  setTimeout('dog_move()',5000);
}

function dog_move(){
     timer=setInterval("anime2()",100);
}

function hyoji(){
  document.getElementById("jitensha").style.left = posLeft_jitensha;
  document.getElementById("jitensha").style.top = posTop_jitensha;
  document.getElementById("jitensha").src=animeImage1[current1].src;
  document.getElementById("dog").style.left = 300;
  document.getElementById("dog").style.top = 80;
  document.getElementById("dog").src=animeImage2[current2].src;
}

//-->     
</SCRIPT>

// JavaScript 表記

<!--

//　＊＊＊　自転車画像８枚を配列に取得　＊＊＊

animeImage1=new Array(8);

for (var i=0;i<8;i++){

animeImage1[i]=new Image();

animeImage1[i].src="image/jitensha/jitensha"+(i+1)+".gif";

}

//　＊＊＊　犬の画像６枚を配列に取得　＊＊＊

animeImage2=new Array(6);

for (var i=0;i<6;i++){

animeImage2[i]=new Image();

animeImage2[i].src="image/dog/dog"+(i+1)+".gif";

}

//　＊＊＊　自転車の初期値位置設定　＊＊＊

current1=0;

posLeft_jitensha = 250;

posTop_jitensha = 30;

//　＊＊＊　自転車のアニメ開始する関数　＊＊＊

function anime1(){

document.getElementById("jitensha").style.left = posLeft_jitensha;

document.getElementById("jitensha").style.top = posTop_jitensha;

document.getElementById("jitensha").src=animeImage1[current1].src;

current1++;

posLeft_jitensha += -4;

if(current1==8){current1=0}

if(posLeft_jitensha < 10){

clearInterval(timer2);

}

function play1(){

current1=0;

posLeft_jitensha = 250;

document.getElementById("jitensha").style.left = 250;

document.getElementById("jitensha").style.top = 30;

timer2=setInterval("anime1()",150);

}

//　＊＊＊　犬のアニメ開始　＊＊＊

current2=0;

posLeft_dog = 300;

posTop_dog = 80;

function anime2(){

document.getElementById("dog").style.left = posLeft_dog;

document.getElementById("dog").style.top = posTop_dog;

document.getElementById("dog").src = animeImage2[current2].src;

current2++;

posLeft_dog += -8;

if(current2==6){current2=0}

if(posLeft_dog < 10){

document.getElementById("dog").src="image/dog/dog.gif";

clearInterval(timer);

}

function play2(){

current2=0;

posLeft_dog = 300;

document.getElementById("dog").style.left = 300;

document.getElementById("dog").style.top = 80;

setTimeout('dog_move()',5000);

}

function dog_move(){

timer=setInterval("anime2()",100);

}

function hyoji(){

document.getElementById("jitensha").style.left = posLeft_jitensha;

document.getElementById("jitensha").style.top = posTop_jitensha;

document.getElementById("jitensha").src=animeImage1[current1].src;

document.getElementById("dog").style.left = 300;

document.getElementById("dog").style.top = 80;

document.getElementById("dog").src=animeImage2[current2].src;

}

//-->

</SCRIPT>