经过昨天对移动端基础的了解，今天就来用原生JS实现一下我们的幻灯片。
因为是用原生实现，所以本文篇幅较长，各位看官只需理解思路即可，代码部分可以粗略看看。
毕竟我们有better-scroll这样封装好的框架能更快速实现效果。b（￣▽￣）d
首先根据我们昨天的滑屏操作，先将幻灯片的滑屏效果做出来。这里大家将照片地址更换成自己的就能得到效果。
案例要在客户端才有效果哦，如果在PC端，网页中右键点审查，控制器旁边有个手机图标，点击下图这个也能有效果。
Document
滑屏效果做出来以后，我们给它添加动画，接下来为了大家方便看，就只写JavaScript的代码。红色的为添加的新代码。
这一步我们将每次手指离开屏幕后进行判断，判断手指移动的距离是否超过30%，抬起则切换到下一张。我们在每次切换时添加了0.3s的延迟动画。因为这延迟动画在手指触屏时就会生效，所以我们在touchstart的时候将它清除。
我们实现上面效果后，可以发现会有划出去的风险，接下来我们要实现无缝滚动
在此之前，我们要了解实现无缝滚动的原理，下面我做了个图，一目了然，如果有不明白可以评论联系我。
原理就是：当用户往第一组的第一张滑动时，我们将他移动到第二组的第一张。
当用户网第二组最后一张滑动时，我们将他移动到第一组的最后一张。