程序员人生网站导航

实例教程：JS实现图片无间隙滚动代码

栏目：jscript时间：2014-03-21 23:46:19

　　网(LieHuo.Net)教程最近要做一个首页图片无间隙的滚动的效果,原先准备用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 属性指定的父坐标的宽度

<html><head><title>建站学院 www.wfuyu.com</title><style type="text/css">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><script language="javascript">function ScrollImgLeft(){var speed=20var 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.innerHTMLfunction 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></head><body><h2 align="center">向左滚动</h2><div style="text-align:center"><div class="sqBorder"><div id="scroll_div" class="scroll_div"><div id="scroll_begin"><ul><li <img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li></ul></div><div id="scroll_end"></div></div></div><script type="text/javascript">ScrollImgLeft();</script></div><style type="text/css">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><script language="javascript">function ScrollImgTop(){var speed=20var 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.innerHTMLfunction 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><h2 align="center">向上滚动</h2><div style="text-align:center"><div class="sqBorder"><div id="scroll_div" class="scroll_div"><div id="scroll_begin"><ul><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li><li><img src="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" _fcksavedurl="http://www.wfuyu.com/images/logo.gif" /></li></ul></div><div id="scroll_end"></div></div></div><script type="text/javascript">ScrollImgTop();</script></div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' _fcksavedurl='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 网络广告营销策略效果与实践的总结

下一篇 “乐儿网”成长历程：母婴网站的后起之秀

------分隔线----------------------------