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

　　烈火网(LieHuo.Net)教程最近要做一个首页图片无间隙的滚动的效果,原先准备用marquee来做,但是<marquee>循环滚动时有间隙.在网上找了下。

这个相对简单,实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2， demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性：

<html><br /> <head><br /> <title>烈火建站学院 www.veryhuo.com</title></p> <p><style type="text/css"><br /> body{}{margin:0px auto; padding:0px;}<br /> ul,li{}{margin:0px; padding:0px;list-style:none;}<br /> .sqBorder {}{width:602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}<br /> .scroll_div {}{width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}<br /> .scroll_div img {}{width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}<br /> #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{}{display:inline;}/**//*设置ul和li横排*/<br /> </style></p> <p></head><br /> <body><br /> <h2 align="center">向左滚动</h2><br /> <div style="text-align:center"><br /> <div class="sqBorder"></p> <p><div id="scroll_div" class="scroll_div"><br /> <div id="scroll_begin"><br /> <ul><br /> <li <img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> </ul><br /> </div><br /> <div id="scroll_end"></div><br /> </div></p> <p></div></p> <p></div></p> <p><style type="text/css"><br /> body{}{margin:0px auto; padding:0px;}<br /> ul,li{}{margin:0px; padding:0px;list-style:none;}<br /> .sqBorder {}{width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}<br /> .scroll_div {}{width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}<br /> .scroll_div img {}{width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}<br /> </style></p> <p><h2 align="center">向上滚动</h2><br /> <div style="text-align:center"><br /> <div class="sqBorder"></p> <p><div id="scroll_div" class="scroll_div"><br /> <div id="scroll_begin"><br /> <ul><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> <li><img src="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" _fcksavedurl="http://www.veryhuo.com/images/logo.gif" /></li><br /> </ul><br /> </div><br /> <div id="scroll_end"></div><br /> </div></p> <p></div></p> <p></div></p> <p></body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' _fcksavedurl='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

导航界面推荐广告？蔚来回应 不会用车机屏幕展开广告业务

第四届进博会进入布展阶段 首批展品已进入场

他们是数字经济领域的弄潮儿，2021年度数字新浙商榜单发布

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

导航界面推荐广告？蔚来回应不会用车机屏幕展开广告业务

第四届进博会进入布展阶段首批展品已进入场