lb.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/**
 * @desc 一个轮播插件 
 * @author Mxsyx (zsimline@163.com)
 * @version 1.0.0
 */

class Lb {
  constructor(options) {
    this.lbBox = document.getElementById(options.id);
    this.lbItems = this.lbBox.querySelectorAll('.lb-item');
    this.lbSigns = this.lbBox.querySelectorAll('.lb-sign li');
    this.lbCtrlL = this.lbBox.querySelectorAll('.lb-ctrl')[0];
    this.lbCtrlR = this.lbBox.querySelectorAll('.lb-ctrl')[1];

    // 当前图片索引
    this.curIndex = 0;
    // 轮播盒内图片数量
    this.numItems = this.lbItems.length;

    // 是否可以滑动
    this.status = true;

    // 轮播速度
    this.speed = options.speed || 600;
    // 等待延时
    this.delay = options.delay || 3000;

    // 轮播方向
    this.direction = options.direction || 'left';

    // 是否监听键盘事件
    this.moniterKeyEvent = options.moniterKeyEvent || false;
    // 是否监听屏幕滑动事件
    this.moniterTouchEvent = options.moniterTouchEvent || false;

    this.handleEvents();
    this.setTransition();
  }

  // 开始轮播
  start() {
    const event = {
      srcElement: this.direction == 'left' ? this.lbCtrlR : this.lbCtrlL
    };
    const clickCtrl = this.clickCtrl.bind(this);

    // 每隔一段时间模拟点击控件
    this.interval = setInterval(clickCtrl, this.delay, event);
  }

  // 暂停轮播
  pause() {
    clearInterval(this.interval);
  }

  /**
   * 设置轮播图片的过渡属性
   * 在文件头内增加一个样式标签
   * 标签内包含轮播图的过渡属性
   */