如何用JavaScript编写带transition动画的移动端轮播效果？

本文共计1456个文字，预计阅读时间需要6分钟。

JavaScript实现轮播的多种方式，包括桌面端的移动端的实现方式都有很大差异，但核心实现原理基本相同，以下要点：

1. 确定播放方向。 通常为横向轮播，除非特别指定。

JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎下面几个要点。即：

1. 确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。
2. 对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那么就会出现留白（如果你允许继续滑动的话，不过不允许滑动也没有啥意思了，除非你想来回轮播，这个我在另一篇用jQuery也说明过），此时应该让你的左边显示应该轮播图片的最后一张，实现无缝连接。
3. 对最后一张图片的处理。跟第一张一样，你需要在继续滑动的时候显示第一张图片，实现无缝连接。
4. 对标记跟随原点的处理。这个需要对原点的排列方式和下标进行严谨的逻辑判断。

我这里是在移动端的一个轮播效果，纯JavaScript原生实现，应该说很接近工作实际了。请诸位爷上眼。