JS实现无缝左轮播

最近学到了面向对象的编程思想，又重新写了一遍无缝轮播图。

无缝轮播图的思路：

css布局部分:1.设置一个视口容器。（轮播图可视部分，宽度为一个图片的宽度，开启相对定位，设置overflow：hidden）2.视口容器内有一个图片容器。（图片是等宽的且横向排列，容器开启绝对定位）3.分页、上下页通过定位完成布局（注意z-index）

js部分：1.轮播的本质。改变图片容器的left值（图片的宽度*索引值）。JS添加transition属性控制过渡效果 2.无缝轮播。在图片最后复制第一张图片，实现最后一张过渡到第一张；然后再取消过渡时间，让图片瞬间移动到第一张3.同步分页样式 4.上下页、点击切换图片（实质上是控制索引）

总体代码思路：把整个轮播图当作一个对象。轮播的内容和分页等作为对象的属性；图片移动、分页样式同步、上下页切换等作为对象的方法。采用构造函数的方式，模拟一个类；每个轮播图都是这个类的实例，需要时传入必要的参数即可。

1. HTML代码：

2.css代码（样式自己随意写，定位必须写）

3.JS代码