原生JS（三）：轮播图组件

2018-02-03

项目地址：https://github.com/Neilai/widget/blob/master/code/bannerha.js

一般思路

一个组件需要考虑以下几个部分

事件绑定

哪几个元件会触发事件发生，需要绑定什么事件
动画变量的确定

动画是由哪些变量控制的（例如本组件变化的变量是left）
哪些变量对动画变量有控制力

例如本组件中需要点击圆圈也要产生动画，不同的圆圈产生移动不同的值，所以我们需要一个中间变量index去控制动画变量。

具体实现

整体架构和之前是一样的，传入元素后需要找到父容器并继承包裹函数r

初始化的时候，需要在第一张图片前加上最后一张图片，最后一张图片后加上第一张图片。

clone: function() {
    var fir = this.oUl.children[0].cloneNode(true),
        last = this.oUl.children[this.len - 1].cloneNode(true);
    this.oUl.appendChild(fir);
    this.oUl.insertBefore(last, this.oUl.children[0]);
    this.len = this.oUl.children.length;
    this.oUl.style.left = -this.liW + 'px';
},

然后按照缓冲运动的套路移动图片大小的距离，需要注意的是从最后一张移到第一张和从第一张移到最后一张都需要重置一下left

if (srty > -self.liW) {   
  self.oUl.style.left = -self.liW * (self.len - 2) + 'px';}
if (srty < -self.liW * (self.len - 2)) {    
  self.oUl.style.left = -self.liW + 'px';
}

利用num变量记录现在到了第几张图，这样就可以直接利用circle的index计算需要的偏移量
1
2
3
var myIndex = i - (self.num - 1);
var offset = -self.liW * myIndex;
self.go(offset);