非常好的图片滚动代码(多幅图片依次向上滚动, 每幅图都会有停留展示时间)

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

  < 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 >

你可能感兴趣的:(图片滚动)