布局：
1. 使用 flex 布局使子元素水平排列；
2. 子元素宽度设置100%，flex-shrink 设置为 0（这个属性保证子元素不被压缩）
定时器无缝轮播：
轮播之前需要将首尾各添加一张图片。其目的就是实现无缝轮播。
然后将父元素 left 向左移动一个屏幕宽度的距离。这样才能让第二张（因为首尾各添加了一张图片，所以原先的第一张就变成了第二张）变成可视范围的第一张。
轮播到最后一张图片（这里的最后一张指的是拼接的第一张）时；
①清除掉定时器；
②开启临界处理（重置父元素的left）；
③开启下一轮轮播。
这里是实现无缝轮播的关键；其目的是播放最后一张的同时，与第一张偷梁换柱。因为最后一张与第一张图片相同，所以快速地改变其 left 用户并无感知。并且同时开启下一轮定时器，1.5s 之后执行第二张图片播放。而这个 1.5s 之内就好了准备（清除当前定时器，重置父元素 left）。
右边按钮点击无缝轮播：
逻辑同定时器无缝轮播类似，因为方向都是从右向左播放。无缝轮播的核心都是播放到最后一张时偷梁换柱（播放最后一张图片的1.5s 同时，改变父元素 left 成初始值，负数的屏幕宽度）。
左边按钮点击无缝轮播：
左边按钮无缝轮播的核心与以上差不多，唯一的区别就是当播放到第一张图片时，开始偷梁换柱（播放第一张图片的1.5s 同时，改变父元素 left 成最大值，负数的（屏幕宽度*（子元素个数-2）））。
指示灯点击无缝轮播：
点击第一张图片时，同左边按钮点击无缝轮播。点击最后一张图片时，同右边按钮点击无缝轮播。
以垂直滚动为例：一组图片控制它的滚动条进行滚动
且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思
还有就是用原生js模仿jQuery写一个动画函数，最简单版的就是：var timer = null
function ani(ele,target) {
clearInterval(ele.timer)
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10
step = step>0?Math.ceil(step):Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px"
console.log(1)
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px"
clearInterval(ele.timer)
}
},30)
}
利用动画实现图片位置的移动，也是放一个图片到前面。
第二个就是还是放一张图到前面，然后把带图片的li定位；用一个arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}]这样的数组把值分别赋给li；要滚动的时候把arr的最后一项放到最前面，再依次赋值给li，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。
