JS代码
1.原理
由于轮播图已经横向排列, 所以只要控制.swiper向x轴偏移距离, 就可以实现图片切换, 这里使用transform的translate属性来控制x轴偏移.可以通过transition...在构造器里新建了一些常量, 轮播图的DOM, 轮播图片的DOM数组, 轮播图的个数(注意是没有初始化前的图片个数), 以及赋值延时(默认是1000ms)
随后调用初始化函数
constructor (delay...随后, 将轮播图显示的位置定在第一张图片位置, 即1的位置
currentPosition变量用于标记当前滚动的图片
init () {
// 将轮播图第一项克隆, 并放在最后
const cloneFirst...滚动的延时使用设定的delay, 延时结束后, 清除过渡动画(过渡动画的清除, 主要给后面最后一位跳到第一位时用)和isAnimating标记
goSlider () {
// 添加过渡效果, delay...此时没有过渡动画, 就实现了最后一位5和第一位5的快速切换, 然后过渡到第1位;
给currentPosition设置为1后, 进入到切换动画, 这样视觉上就是5过渡到1
animate () {