ClassContent/历届学生/逯帅帅/项目开发/上课项目/swiper/swiper.js

// 保护
(function () {

    var defaultOption = {
        el: '.swiper',
        width () {
          return $(defaultOption.el).clientWidth
        },
        timer: null,
        time: 3000,
        initialSlide: 0,
        direction: 'vertical',
        speed: 800,
        grabCursor: false,
        loop: false,
        autoplay: false,
        swiperWrapper: '.swiper-wrapper',
        on: {

        },
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.next',
            prevEl: '.prev',
        },
        // 事件控制中心，主要保存事件的
        eventList: {}
    }
    // 类的构造函数
    function swiper (el,option) {
       if (typeof el == "string") {
           defaultOption.el = el || defaultOption.el;
           defaultOption.time = option.time || defaultOption.time;
           defaultOption.initialSlide = option.initialSlide || defaultOption.initialSlide;
           defaultOption.direction = option.direction || defaultOption.direction;
           defaultOption.speed = option.speed || defaultOption.speed;
           defaultOption.grabCursor = option.grabCursor || defaultOption.grabCursor;
           defaultOption.loop = option.loop || defaultOption.loop;
           defaultOption.autoplay = option.autoplay || defaultOption.autoplay;

           if (option.hasOwnProperty("pagination")) {
               defaultOption.pagination.el = option.pagination.el || defaultOption.pagination.el;
           }

           if (option.hasOwnProperty("navigation")) {
               defaultOption.navigation.nextEl = option.navigation.nextEl || defaultOption.navigation.nextEl;
               defaultOption.navigation.prevEl = option.navigation.prevEl || defaultOption.navigation.prevEl;
           }

           if (option.hasOwnProperty("on")) {
               for (const key in option.on) {
                   defaultOption.on[key] = option.on[key]
               }
           }

           console.log(defaultOption)
           this.next = $(defaultOption.navigation.nextEl);
           this.wrapper = $(defaultOption.swiperWrapper);
           this.prev = $(defaultOption.navigation.prevEl);
           this.pagination = $(defaultOption.pagination.el);
           this.el = $(defaultOption.el);

           this.init();

       } else {
           throw new Error("最外层父节点的类名必传")
       }
    }

    // 类的方法
    swiper.prototype = {
        init () {
            this.CreatedPagination();
            this.setInitialSlide();
            this.setGrabCursor();

            if (defaultOption.autoplay) {
                this.autoPlay();
                this.el.onmouseover = () => clearInterval(defaultOption.timer);
                this.el.onmouseout = () => this.autoPlay();
            }

            this.nextClick();
            this.prevClick();
        },
        setInitialSlide() {
            if (defaultOption.initialSlide != 0) {
                this.changePagination(defaultOption.initialSlide)
            }
        },
        setGrabCursor() {
            defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
        },
        setSpeed() {
            this.wrapper.style.transition = `all ease ${defaultOption.speed / 1000}s`;
        },
        nextClick() {
            // this 指向
            // var test = this;
            // 1：保存this
            // 2: =>
            // 3: a().bind(this)
            this.next != null ? this.next.onclick = () => {
                this.setSpeed();
                this.animation(-defaultOption.width())
            } : ''
        },
        prevClick() {
            this.prev != null ? this.prev.onclick = () => {
                this.setSpeed();
                this.animation(defaultOption.width())
            } : ''
        },
        slideTo(index) {
            this.setSpeed();
            this.changePagination(index)
        },
        on (eventType,event) {
            defaultOption.eventList[eventType] = event;
        },
        CreatedPagination() {
          if (this.pagination != null) {
              Array.from(this.wrapper.children).forEach((v,i) => {
                  this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
              });
              this.BindPaginationClick();
          }
        },
        BindPaginationClick() {
            Array.from(this.pagination.children).forEach((v,i) => {
                v.onclick = () => {
                    this.setSpeed();
                    this.changePagination(i)
                }
            })
        },
        changePagination(i) {
            defaultOption.eventList.slideChange && defaultOption.eventList.slideChange(i);
            defaultOption.on.slideChange && defaultOption.on.slideChange(i);
            Array.from(this.pagination.children).forEach((item) => {
                item.className = ""
            });
            Array.from(this.pagination.children)[i].className = "active";
            this.wrapper.style.transform = `translateX(${i * -defaultOption.width()}px)`;
        },

        animation(offset) {
            var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
            var newOffset = offset + val;
            var maxWidth = -(this.wrapper.children.length - 1) * defaultOption.width();

            if (newOffset > 0) {
                if (defaultOption.loop) {
                    newOffset = maxWidth;
                } else {
                    newOffset = 0
                }
            }

            if (newOffset < maxWidth) {
                if (defaultOption.loop) {
                    newOffset = 0;
                } else {
                    newOffset = maxWidth
                }
            }

            var index = Math.abs(newOffset / defaultOption.width());
            this.changePagination(index);

            defaultOption.eventList.slideChange && defaultOption.eventList.slideChange(index);
            defaultOption.on.slideChange && defaultOption.on.slideChange(index)
        },
        autoPlay () {
            defaultOption.timer = setInterval(() => {
                this.animation(-defaultOption.width())
            }, defaultOption.time);
        }
    }

    function $(className) {
        var newClassName = className.split(" ");
        if (newClassName.length > 1) {
            var father = newClassName[newClassName.length - 2];
            var childrenList = document.querySelector(father).children;

            var arr = Array.from(childrenList).filter(function (el){
                if (
                    el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
                    ||
                    el.tagName.toLowerCase() == newClassName[newClassName.length-1]
                ) {
                    return el;
                }
            });

            if (arr.length > 1) {
                return document.querySelectorAll(className)
            } else if (arr.length == 1){
                return document.querySelector(className)
            } else {
                throw new Error(`${className} 不存在，请检查`)
            }

        } else {
            return document.querySelector(newClassName);

        }
    }

    window.lb = swiper;

})()