四幅图片依次向上滚动, 每幅图都会有停留展示时间.
<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>
<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>