js实现图片滚动效果

来源:百度知道 编辑:UC知道 时间:2024/04/30 15:33:43
要求:1.在特定的区域内滚动;2.当图片没有滚动时页面显示三张图片,每一张的宽度为173px,高度为107px;3.连续不间断地滚动;4.代码最好附有详细说明。

<SCRIPT language="JavaScript">
var speed=50; //设置滚动速度
demo2.innerHTML=demo1.innerHTML //复制dome1为dome2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至dome1与dome2交界时
demo.scrollTop-=demo1.offsetHeight //dome跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) //设置定时器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器,继续滚动
</SCRIPT>

<div id="demo" style="overflow: hidden; height: 600; width: 180; background: #214984; color: #ffffff">
<div id="demo1" align="center">
<!-- 定义图片 -->
</div>
<div id="demo2" align="center"></div>
</div>