JS无缝轧制效果实现方法分析

本文通过一个实例描述了JS无缝滚动效果的实现方法。分享给大家参考，如下：

效果：

1.默认情况下，向左缓慢滚动

2.放在左箭头或向左滚动，放在右箭头向右滚动

3.将它放在图片上停止滚动，并将其移出以继续滚动

思考：

1.计算图片列表ul的宽度

2.启动计时器，使其向左的距离不断增加，从而产生向左移动的效果

3.复制一份图片列表。向左移动时，当左边距大于一个副本的宽度时，将其左边距拉回到0。向右移动时，当左边距大于0时，将其左边距拉到整个两张图片列表宽度的一半(即一张拷贝的宽度)。(拉的瞬间很快，用户察觉不到，造成无缝滚动的错觉)

4.4的正值或负值。偏移量决定了移动的方向

5.把它放在图片上来停止这个计时器，把它移走，然后重新启动它

window . onload=function(){ var odiv=document . getelementbyid(' div ')；var oul=odiv . getelementsbytagname(' ul ')[0]；var oli=oul . getelementsbytagname(' oul ')；var BTN=document . getelementsbytagname(' BTN ')；var is peed=-1；var计时器=nulloul . innerhtml=oul . innerhtml；//复制图片列表：oul.style.width=oli [0]。offsetwidth * oli.length ' px//如果不计算ul的宽度，图片会先出现，然后在移动过程中加载。有种不顺畅的感觉。如果你剪的图片太多，它就会分叉。宽度由外部div决定。timer=set interval(function(){ oul . style . left=oul . offsetleftispeed ' px '；//offsetLeft输出不带单位的数字，右侧也使用oul.style.left输出字符串而不是数值。而且它获得行间样式，如果(oul.offsetleft-oul.offsetwidth/2){//你也可以用，那就没用了。style.left或。样式.宽度？(不确定)oul . style . left=0；} else if(oul . offsetleft 0){ oul . style . left=-oul . offsetidth/2；} ),30};btn[0]。onmouseover=function(){ is peed=-1；};btn[1]。onmouseover=function(){ is feed=1；};oul . onmouseover=function(){ clearInterval(计时器)；};oul . onmouseout=function(){ timer=setInterval(function(){ oul . style . left=oul . offsetleft is feed ' px '；if(oul . offsetleft-oul . offsetidth/2){ oul . style . left=0；} else if(oul . offsetleft 0){ oul . style . left=-oul . offsetidth/2；} ),30};//如果增加速度和定时器时间，能达到同样的效果吗？答案是否定的.会变成一卡一卡}；};注：这样得到的宽度不包含边距，所以图片间边距的写法可以是li的宽度大于img的宽度，li的宽度-img的宽度为两边边距之和

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》和0103010

希望本文对JavaScript编程有所帮助。