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

最新推荐文章于 2021-06-20 04:32:59 发布

转载最新推荐文章于 2021-06-20 04:32:59 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/juan/archive/2009/05/23/1487475.html

本文介绍了一个使用JavaScript实现的网页上滚动显示图片的效果。通过设置定时器，图片可以在页面中自动向上或向下滚动，同时提供了鼠标悬停停止滚动的功能。

<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