您当前位置：首页 > web前端 > jscript > 实例教程：JS实现图片无间隙滚动代码

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

来源：程序员人生发布时间：2014-03-21 23:46:19 阅读次数：2466次

　　网(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>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

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

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

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

分享到:

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

为码而活

积分：4237

15粉丝

7关注

栏目热点