经典的图片无缝滚动,点击向上向下按钮还可以控制方向

<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>zhouxuanmsn@hotmail.com</title>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300;width:99%;">
<div id="demo1">
 
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
 
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
 </div>
 <div id="demo2"></div>
</div>
<p>
<script language="javascript">
var speed=30;
var TopMyMar;
var DownMyMar
function   MarqueeTop()
{
clearInterval(DownMyMar)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
 if(demo2.offsetTop-demo.scrollTop<=0)
  demo.scrollTop-=demo1.offsetHeight;
 else
  demo.scrollTop++;
}
TopMyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(TopMyMar)}
demo.onmouseout=function() {TopMyMar=setInterval(Marquee,speed)}
}
MarqueeTop();
function  MarqueeDown()
{
clearInterval(TopMyMar)
demo2.innerHTML=demo1.innerHTML //复制层的内容
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
DownMyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(DownMyMar)}
demo.onmouseout=function() {DownMyMar=setInterval(Marquee,speed)}
}
</script>
<a href="#" onClick="MarqueeTop()">向上</a> <a href="#" onClick="MarqueeDown()">向下</a>
</body>
</html>

转载于:https://www.cnblogs.com/juan/archive/2009/05/23/1487475.html