轮播图思路：
未命名文件.jpg
ul li标签
transform: translate
translate的距离默认为ul中第一个li标签的scrollWidth
（scrollWidth包括由于overflow溢出而在屏幕上不可见的内容。
scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 ）
translate是对ul来说的
是否自动轮播：
自动轮播，通过定时器。同时手动滑动时清空定时器
无限滚动实现：
为了实现无限滚动需要多添加两张重复的图片：
图片ABCD ->
图片DABCDA
即在头尾加上图片的最后一张和第一张
https://www.jianshu.com/p/67d1f4989eb0
N张照片把contentsSize设置为N+2个图片的宽度，例子如下，两端填充如图，当处于一端时，且即将进入循环状态的时候，如第二张图，从状态1滑动到状态2，在滑动结束的时候，将当前的位置直接转到状态3，直接setContentOffset神不知鬼不觉，视觉上是循环的。
image
同时：
做边界判断
左右切换和前面的方法有所不同，前面是获取当前的索引值乘以-600px当做位移距离，
如果当前位置超过边界时（为补在头上的D、或尾上的A），小于-3000则变为-600px，如果大于-600则变为-3000px
轮播图圆点：
通过控制active的class来实现
网友评论