随便打开一个网页，基本上就会看到无缝滚动或者轮播，比如淘宝，360官网首页。

通过观察这些轮播图片，我们可以发现图片是可以循环来回切换的，那么该怎么做呢？

实现轮播或无缝滚动的方式主要有两种，一种是通过改变图片的亮度来显示或隐藏图片，即透明图片，另一种是通过移动边框在可见区域显示图片。这两种方法都将使用同一个东西，那就是定时器。

JavaScript中有两种定时器：1 . setinterval()；2 . settimeout()；还有两种关闭计时器的方法，clearInterval()和clearTimeout()。这两个定时器的区别在于，前者可以执行几次，而后者只能执行一次。

这一次，我们只讨论无缝滚动，下一节介绍转盘。

实现简单无缝滚动的代码如下：

/*完整代码*/！DOCTYPE html html lang=' en ' hearteta charset=' utf-8 '/style div { position : relative；宽度width:630px高度：220 px；border:solid 2px黑色；飞越：隐藏；} ul { position:absolutetop:10pxleft:0} img { width:200px高度：200 px；float:left右边距：10 px；border:2px固体黄色；} Li { list-style : none；margin:0划水：0；} ul { margin:0划水：0；}/style script window . onload=function(){ var OUl=document . getelementbyid(' main ')；var AlI=OUl . GetElementsBytagname(' img ')；var oInput=document . getelementsbytagname(' input ')[0]；oul . innerHTMl=oul . innerHTMl；oul . style . width=AlI . length * AlI[0]。offsetWidth ' pxvar计时器=nullsetInterval(function(){ OUl . style . left=OUl . offsetleft-8 ' px '；if(OUl . offsetleft-OUl . offsetidth/2){ OUl . style . left=' 0px '；}},30);};/script/headsdydivul id=' main ' liimg src=' http :/img/1 . jpg '/Lili mg src=' http :/img/2 . jpg '/Lili mg src=' http :/img/3 . jpg '/Lili mg src=' http :/img/4 . jpg '/Lili mg src=' http :/img/9 . jpg '/Li/ul/div/div/body/html/-/

无缝滚动布局比较简单，下面主要讲解JS的一些内容：

首先，我们分别获取ul和li，然后复制ul的内容，通过js动态修改ul的宽度(如果想无缝上下滚动，修改其宽度)，最后启动定时器。在代码中，ul每30微秒向左移动8个像素，当ul的可见左边距小于ul总长度的一半时，它变为0。因为电脑运行速度很快，几乎感觉不到这种变化。我们看到的只是画面向左移动，无休止地移动。

以上是边肖介绍的关于网页无缝滚动的js代码，希望对大家有所帮助！