2
1.画界面
1.画显示区域
首先就是画个固定的区域, 用来展示轮播图当前能看到的图, 其余超出的部分, 使用 overflow: hidden 隐藏.
.box {
width: 300px;...解决方法:
初始化的时候, 复制第一位图片放在最后一位;复制原来最后一位图片, 放到第一位.当然如果你只往右切换, 则不用将第一位放在最后一位.示例如下(数字代表图片顺序):
初始排列:
|1|2|...在构造器里新建了一些常量, 轮播图的DOM, 轮播图片的DOM数组, 轮播图的个数(注意是没有初始化前的图片个数), 以及赋值延时(默认是1000ms)
随后调用初始化函数
constructor (delay...随后, 将轮播图显示的位置定在第一张图片位置, 即1的位置
currentPosition变量用于标记当前滚动的图片
init () {
// 将轮播图第一项克隆, 并放在最后
const cloneFirst...* 300}px`
}
3.滚动动画
滚动时, 给.swiper标记一个isAnimating的class,来标明正在滚动.