图片展示器

来源：互联网发布：java tcp nat穿透编辑：程序博客网时间：2024/04/28 19:42
 <div id='div1' style="border:1px solid #c0c0c0;width:293px;height:66px;overflow:hidden;position:absolute;top:100px;left:100px;">
<div id="first" style="position:absolute;;top:2px;left:2px;height:64px;width:289px;">
<img src="http://i2.sinaimg.cn/IT/images/2008-07-04/U1960P2T78D12794F1070DT20080704163744.jpg" width="90" height="60" alt="古楼遗风" />
<img src="http://i2.sinaimg.cn/IT/images/2008-07-04/U1960P2T78D12794F3303DT20080704164135.jpg" width="90" height="60" alt="夕光涟潋" />
<img src="http://i3.sinaimg.cn/IT/images/2008-07-04/U1960P2T78D12794F3304DT20080704164656.jpg" width="90" height="60" alt="爱之缠绵" />
</div>
<div id="second"  style="position:absolute;top:2px;left:294px;height:64px;width:289px;">
<img src="http://i1.sinaimg.cn/IT/images/2008-07-04/U1960P2T78D12794F3305DT20080704165504.jpg" width="90" height="60" alt="欢乐瞬间" />
<img src="http://i2.sinaimg.cn/IT/images/2008-07-04/U1960P2T78D12794F3306DT20080704171426.jpg" width="90" height="60" alt="台岛奇观" />
<img src="http://i3.sinaimg.cn/IT/images/2008-07-04/U1960P2T78D12794F3307DT20080704173213.jpg" width="90" height="60" alt="天堑变通途" />
</div>
</div>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var d=document,f =  d.getElementById('first'),s = d.getElementById('second');
function move(){
var timer = setInterval(function(){
if(s.offsetLeft+s.offsetWidth<0||f.offsetLeft+f.offsetWidth<0){
clearInterval(timer);
f.offsetLeft+f.offsetWidth<0?(f.style.left = s.offsetLeft + s.offsetWidth +2+ 'px'):(s.style.left = f.offsetLeft + f.offsetWidth +4+ 'px')
setTimeout(move,2000);
}
else{
f.style.left = f.offsetLeft - 2 + 'px';
s.style.left = s.offsetLeft - 2 + 'px';
}
},10)
}
setTimeout(move,2000);
//-->
</SCRIPT>