JS实现图片无间隙滚动代码

最近要做一个首页图片无间隙的滚动的效果,原先准备用marquee来做,但是<marquee>循环滚动时有间隙.在网上找了下:
这个相对简单,实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器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 属性指定的父坐标的宽度

1.向左滚动

代码：

body{margin:0px auto; padding:0px;}

ul,li{margin:0px; padding:0px;list-style:none;}

.sqBorder {width:602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}

.scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}

.scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}

#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/*设置ul和li横排*/

</style>

function ScrollImgLeft(){

var speed=20

var scroll_begin = document.getElementById("scroll_begin");

var scroll_end = document.getElementById("scroll_end");

var scroll_div = document.getElementById("scroll_div");

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee(){

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)

scroll_div.scrollLeft-=scroll_begin.offsetWidth

else

scroll_div.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

scroll_div.onmouseover=function() {clearInterval(MyMar)}

scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

}

</script>

<ul>

</ul>

</div>

</div>

</div>

</div>

2.向上滚动

body{margin:0px auto; padding:0px;}

ul,li{margin:0px; padding:0px;list-style:none;}

.sqBorder {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}

.scroll_div {width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}

.scroll_div img {width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}

</style>

function ScrollImgTop(){

var speed=20

var scroll_begin = document.getElementById("scroll_begin");

var scroll_end = document.getElementById("scroll_end");

var scroll_div = document.getElementById("scroll_div");

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee(){

if(scroll_end.offsetTop-scroll_div.scrollTop<=0)

scroll_div.scrollTop-=scroll_begin.offsetHeight

else

scroll_div.scrollTop++

}

var MyMar=setInterval(Marquee,speed)

scroll_div.onmouseover=function() {clearInterval(MyMar)}

scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

}

</script>

<ul>

</ul>

</div>

</div>

</div>

</div>

posted @ 2008-07-23 14:47 xumingming 阅读(2199) 评论(5) 收藏举报

刷新页面返回顶部

JS实现图片无间隙滚动代码

公告