js实现图片无缝滚动

首先，无缝滚动的第一个重点是——个动作。至于如何让页面的元素节点移动，需要学习JavaScript中关于计时器的相关知识。

在JS中创建计时器有两种方法：setTimeout和setInterval。首先，它们接收相同的参数：第一个参数是计时器要执行的函数，第二个参数是一个数字，表示计时器执行函数之前已经过了多少毫秒。两者的区别在于setTimeout只在指定时间后执行一次函数，而setInterval每隔指定时间执行一次函数。简单来说，setInterval是setTimeout的循环版本。

计时器还有另一种用法：为了消除计时器，还有两种方法：clearTimeout和clearInterval，它们对应不同类型的计时器。另外，它们都只接收一个参数，这个参数是定时器返回的一个值(我在chrome中调试的时候发现这个返回值全是数字)，用来指定应该取消定时器。

掌握了计时器的知识后，我们开始分析如何使用计时器来使元素移动。其实这很简单，就是类似电影的原理，元素在很短的时间内不断位移，如果我们看的话，元素似乎在不断移动。关于如何让元素移位，可以通过JS修改元素的样式，比如。

oUl.style.left=oUl.offsetLeft速度' px '；在上面的代码中，速度是每次产生的位移。速度的使用相当有趣：我们可以修改速度的正值和负值来修改滚动方向。

另外，关于一个元素的属性offsetLeft，我个人认为要注意两点：offsetLeft的值是由它所定位的左边距和它所设置的边距之和决定的，offsetLeft是相对于它的包含层的距离(offsetTop类似)。当然这是我自己的理解，肯定不是很准确。记住这个坑，下次专门解决。

运动元素的原理基本是这样的。让我们开始分析这个无缝滚动显示图片的实现方法。我引用的所有例子都是向左滚动，向右移动的原理是一样的，正如代码中提到的：

首先假设需要循环滚动的图片只有4张。为了满足图片循环滚动的要求，需要将图片如图(1)所示放置：

这样，当第一张图片1滚出画框时，下一张图片1出现在图片4的后面，这样效果看起来就像一个循环~

当图片滚动到以下情况时：

继续滚动会导致图片后面空白，不是循环滚动的效果。其实这也是节目的重点。每当画面滚动到图(2)时，画面应该回到图(1)的状态，然后继续滚动，从而形成无缝的循环滚动效果。

另外，扩展程序，把鼠标移入画面停止滚动，移出继续滚动的效果写出来，通过取消定时器来实现。代码很简单，就不介绍了。还有，为了好看，我把图片设置为160*120。运行代码时，需要准备自己的图片。

代码如下：

html lang=' in ' head meta charset=' utf-8 ' title title/title style * { margin : 0；填充；} #div1{宽度： 640像素高度： 120像素利润： 100像素汽车；背景色： # 6464;相对位置：溢出：隐藏；} #div1 ul{绝对位置：左33600;前33600名；溢出：隐藏；背景色： # 3b 7796} #div1 ul li{浮点：左；宽度： 160像素高度： 120 pxlist样式：无；}/style脚本窗口。onload=function(){ var odiv=document。getelement byid(' div 1 ')；var oul=文档。获取元素byid(' ul 1 ')；可变速度=2://吴经玲乌尔。innerhtml=oul。innerhtml://哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟*2 -你好(2)var oil=文档。getelement sbytagname(' Li ')；乌尔。风格。宽度=油。长度* 160 ' px//沙吾提ul云娥小姐var get 1=文档。getelement byid(' BTN 1 ')；var get 2=文档。getelement byid(' BTN 2 ')；函数move(){ if(oul。offsetleft-(oul。offset with/2)){//哎哎哎哎，你好四你是谁乌尔。风格。left=0；} if(oUl.offsetLeft 0){//哎哎哎哎，你好一你是谁乌尔。风格。左=-(oul。偏移宽度/2)“px”；} oul。风格。左=左。偏移左速度“px”；}获取1.addEventListener('click '，function(){ speed=-2；}，脚手架2。addevent listener(' click '，function(){ speed=2)；}，falsevar timer=setInterval(移动，30);//魏冄，云娥与云娥同在奥迪夫。addevent listener(' mouseit '，function(){ timer=set interval(move，30)；}，falseodiv。addevent侦听器(' mousemove '，function(){ clear interval(计时器)；//}，false }/脚本/头体输入id=' BTN 1 '类型='按钮'值='哎哎输入id=' BTN 2 '类型='按钮'值='你好div id=' div 1 ' ul id=' ul 1 ' liimg src=' http 3360 img/img _ 1。jpg '/Li liimg src=' http 3360 img/img _ 2。jpg '/Li liimg src=' http 3360 img/img _ 3。jpg '/Li liimg src=' http 3360 img/img _ 4。jpg '/Li/ul/div/body/html联署材料是我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，我，阿云阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜。