学步园

 四幅图片依次向上滚动, 每幅图都会有停留展示时间．

 <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<SCRIPT language="JavaScript">
      <!--
      var scrla=3
      var scrlb=1
      var scrlc=2
      var scrld=4
      var scrlda='scrl_'+scrla;
      var scrldb='scrl_'+scrlb;
      var scrldc='scrl_'+scrlc;
      var scrldd='scrl_'+scrld;
      var timea=100
      var timeb=300
      var tt=180/timea //如果改了图片的高度,此处时间180也需相应改差值
      var ttt=timea+timeb
      var scrlnum=timea+50
      
      function scroll() {
      
      if (scrlnum<=timea) {
      document.all[scrlda].style.top = 0-scrlnum*tt
      document.all[scrldb].style.top = 180-scrlnum*tt //如果改了图片的高度,此处180

也需相应改差值
      }
      
      if ((scrlnum>timea)&&(scrlnum<ttt)) {
      document.all[scrlda].style.top = -180 //如果改了图片的高度,此处180也需相应改

差值
      document.all[scrldb].style.top = 0
      }
      
      scrlnum=scrlnum+1
      
      if (scrlnum>=ttt) {
      scrla=scrla+1;
      if (scrla==5) scrla=1;
      scrlda='scrl_'+scrla;
      
      scrlb=scrla+1;
      if (scrlb==5) scrlb=1;
      scrldb='scrl_'+scrlb;
      
      scrlc=scrlb+1;
      if (scrlc==5) scrlc=1;
      scrldc='scrl_'+scrlc;
      
      scrld=scrlb+1;
      if (scrld==5) scrld=1;
      scrldd='scrl_'+scrld;
      
      scrlnum=0;
      
      document.all[scrlda].style.visibility = 'visible' ;
      document.all[scrldb].style.visibility = 'visible' ;
      document.all[scrldd].style.visibility = 'visible' ;
      document.all[scrldc].style.visibility = 'hidden' ;
      document.all[scrldc].style.top = 180 ;//如果改了图片的高度,此处180也需相应改

差值
      }
      setTimeout("scroll()",20)   
      }
      //-->
      </SCRIPT>

<!--以下width="375" height="150" 为图片固定长宽, 如果更改,则需修改相应数值-->
                  <span style="WIDTH: 375px; POSITION: relative; HEIGHT: 150px;" id="main2"> 
                  <div style="LEFT: 0px; WIDTH: 405px; CLIP: rect(0px 375px 150px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 

150px" id="scroll_image"> 

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;" id="scrl_1">             
                <a href="#" target="_blank"><img src="" border="0" width="375" height="150"></a>
</div>
<div style="LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;" id="scrl_2">             
                <a href="#" target="_blank"><img src="" border="0" width="375" height="150"></a>
</div>
<div style="LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;" id="scrl_3">             
                <a href="#" target="_blank"><img src="" border="0" width="375" height="150"></a>
</div>
<div style="LEFT: 0px; WIDTH: 375px; POSITION: absolute; TOP: 0px;" id="scrl_4">             
                <a href="#" target="_blank"><img src="" border="0" width="375" height="150"></a>
</div>
</td>
</tr>
</table>
</span> 
      <SCRIPT>
 scroll();
      </SCRIPT>
</td>
</tr>
</table>