ClassContent/项目合集/轮播图/插件版/swiper.js

(() => {
  class Swiper {
    // 插件默认参数
    defaultOption = {
      onEvent: {},
      timer: null,
      el: '',
      loop: false,
      autoPlay: false,
      autoTime: 1000,
      initialSlide: 0,
      speed: 300,
      // 左右按钮
      navigation: {
        nextEl: null,
        prevEl: null,
      },
      pagination: {
        el: null,
      },
      length: () => {
       return this._(".swiper_item").length
      },
      width: () => {
       return document.querySelector(this.defaultOption.el).clientWidth
      }
    }

    constructor(el, option) {
      if (typeof el != "string") {
        throw  new Error("el参数必须是字符串")
      }

      if (this.$(el) == null) {
        throw  new Error("el的类名在网页上不存在，请检查")
      }
      this.defaultOption.el = el;
      this.defaultOption.loop = option.loop || this.defaultOption.loop
      this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay
      this.defaultOption.autoTime = option.autoTime || this.defaultOption.autoTime
      this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide
      this.defaultOption.speed = option.speed || this.defaultOption.speed

      this.defaultOption.navigation.prevEl = option?.navigation?.prevEl || this.defaultOption.navigation.prevEl
      this.defaultOption.navigation.nextEl = option?.navigation?.nextEl || this.defaultOption.navigation.nextEl

      this.defaultOption.pagination.el = option?.pagination?.el || this.defaultOption.pagination.el

      this.init()
    }


    init () {
      this.createdDot()
      this.initLeft()
      if (this.defaultOption.autoPlay) {
        this.MouseEvent()
        this.autoPlay()
      }
      this.BindNext()
      this.BindPrev()
    }

    initLeft () {
      this.set_left(this.defaultOption.initialSlide * -this.defaultOption.width())
      this.changeDot(this.defaultOption.initialSlide)
    }

    // 事件控制中心 就是 {}
    on (EventType, callback) {
      this.defaultOption.onEvent[EventType] = callback
    }

    slideTo(index) {
      this.set_left(index * -this.defaultOption.width())
      this.changeDot(index)
    }

    MouseEvent() {

      this.$(".swiper-wrapper").onmouseover = () => {
        clearInterval(this.defaultOption.timer)
      }

      this.$(".swiper-wrapper").onmouseout = () => {
        this.autoPlay()
      }

    }

    autoPlay () {
      this.defaultOption.timer = setInterval(() => {
        this.motion(-this.defaultOption.width())
      }, this.defaultOption.autoTime)
    }

    createdDot() {
      if (this.defaultOption.pagination.el != null) {

        for (var i = 0; i < this.defaultOption.length(); i++) {
          this.$(this.defaultOption.pagination.el).innerHTML += `
            <li class="${i == 0 ? 'active':''}"></li>
          `
        }

        // 绑定事件
        var li = this._(`${this.defaultOption.pagination.el} li`);
        li.forEach((v,i) => {
          v.onclick = () => {
            this.changeDot(i)
          }
        });

      }
    }

    changeDot(index) {

      this.defaultOption.onEvent.hasOwnProperty("slideChange")
      ? this.defaultOption.onEvent.slideChange(index)
      : ''

      var li = this._(`${this.defaultOption.pagination.el} li`);
      li.forEach((itme) => {
        itme.classList.remove("active")
      })

      li[index].classList.add("active")
      this.set_left(index * -this.defaultOption.width())
    }

    BindPrev() {
      this.defaultOption.navigation.prevEl == null
      ? null
      : this.$(this.defaultOption.navigation.prevEl).onclick = () => {
          this.motion(this.defaultOption.width())
        }
    }

    BindNext() {
      this.defaultOption.navigation.nextEl == null
      ? null
      : this.$(this.defaultOption.navigation.nextEl).onclick = () => {
          this.motion(-this.defaultOption.width())
        }
    }

    motion(offset) {
      var totalOffset = this.left() + offset;
      var maxLenght = -this.defaultOption.width() * (this.defaultOption.length() - 1)
      if (totalOffset < maxLenght) {
        totalOffset = 0
      }
      if (totalOffset > 0) {
        totalOffset = maxLenght
      }

      this.set_left(totalOffset)
      this.changeDot(totalOffset / -this.defaultOption.width())
    }


    left() {
      return parseInt(this.$(".swiper-wrapper").style.left)
    }


    set_left(offset) {
      this.$(".swiper-wrapper").style.left = `${offset}px`;
    }


    $(className) {
      return document.querySelector(`${this.defaultOption.el} ${className}`)
    }

    _(className) {
      return document.querySelectorAll(`${this.defaultOption.el} ${className}`)
    }
  }

  window.swiper = Swiper
})()