网页图片无缝循环滚动html代码.docVIP

图片循环滚动代码 图片无缝滚动代码 先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 先了解一下对象的几个的属性： innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 向上滚动的代码： div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#fffffftable align=top cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=topimg src=pic/1.jpg width=156 height=200 /brimg src=pic/2.jpg width=160 height=198 /brimg src=pic/3.jpg width=155 height=200 /brimg src=pic/4.jpg width=157 height=200 //td/trtrtd id=demo2 valign=top/td/tr/table/div script var speed=30 demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2 function Marquee(){ if(demo2.offsetHeight-demo.scrollTop=0)//当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 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:400;width:160;background:#214984;color:#fffffftable align=top cellpadding=0 cellspace=0 border=0trtd id=demo1 valign=topimg src=pic/1.jpg width=156 height=200 /brimg src=pic/2.jpg width=160 height=198 /brimg src=pic/3.jpg width=155 height=200 /brimg src=pic/4.jpg width=157 height=200 //td/trtrtd id=demo2 valign=top/td/tr/table/div script var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function()