js特效-无缝轮播图，简单上手

首先，让大家看效果：

然后给大家介绍一下无缝轮播图的原理

1.我们在一个ul中会使用很多的li，每一个li中嵌入一个图片，如果把轮播图比喻成慢视频的话，每一张图片就是一帧(注意:很多新手会认为一些图片是动态生成的，其实不然，每一张图片已经设置在html中，只不过显示的时候，使用overflow:hidden；将其隐藏了)，下面画个图让大家方便大家理解

2：现在开始定义动画函数animate让ul在div中滚动，通过ul中定位中style.left属性值配合setInterval函数，简直完美

3.重头戏来了，我觉得你理解了这点，就算是掌握了。

大家思考一下:怎么用一种很巧妙的方法让最后一张图片和第一张图片无缝连接

原理解释:

1.界面初始化：ul中5个li,每一个宽度是500px; 当你设置ul的宽度的时候，直接把ul的width设为3000px;

2.当js加载的时候，将第一张图片复制，加载到li的最后，所以ul总共有6个li，width自然是3000px;

3.然后关键：当轮播到第五张图片的时候，第六张图片可以实现无缝的切换，这个时候是会轮播到第六个li上，也就是第一张图，这个时候要将ul的left设为0;

4.固然就回到了第一张图，其实在显示第六张图的时候，其实显示的第一张，由于直接设置left:0px；则不会出现视觉上的改变。所以在滑到第六个li的时候，我们又回到了第一张图片的位置。不懂直接上代码；

4.上面就是实现无缝轮播切换，关于其他的一些左右点击切换和图片列表都不难，没什么好说的，我在代码里面都写了，大家有兴趣去下载看一下

源码地址:https://github.com/Magiccwl/JS_specialeffects