ClassContent/历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.js

// 自执行函数
// 闭包
(function () {

    class Swiper {
        config = {
            timer: null,
            el: '.swiper-container',
            width: () => {
                return  document.querySelector(this.config.el).offsetWidth
            },
            maxLength: () => {
                return document.querySelectorAll(".swiper-slide").length;
            },
            maxWidth: () => {
                return (this.config.maxLength() - 1) * this.config.width()
            },
            loop: false,
            autoPlay: false,
            autoTime: 3000,
            initialSlide: 0,
            speed: 300,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
            fx: true,// true 表示向下，false向上奏
            on: {}
        }
        constructor(el, option) {
            if (typeof el != "string" || el.length == 0 || document.querySelector(el) == null) {
                throw new Error("el参数必传，需要是字符串，并且 选择器需要存在")
            }

            this.config.el = el;

            this.config.loop = option.loop || this.config.loop;
            this.config.autoPlay = option.autoPlay || this.config.autoPlay;
            this.config.autoTime = option.autoTime || this.config.autoTime;
            this.config.initialSlide = option.initialSlide || this.config.initialSlide;
            this.config.speed = option.speed || this.config.speed;
            this.config.navigation.prevEl = option?.navigation?.prevEl || this.config.navigation.prevEl;
            this.config.navigation.nextEl = option?.navigation?.nextEl || this.config.navigation.nextEl;
            this.config.pagination.el = option?.pagination?.el || this.config.pagination.el;
            this.config.on = option?.on ||  this.config.on;

            console.log( this.config)
            this.init();
        }

        init () {
            this.BindNext();
            this.BindPrev();
            this.createdPagination();

            // 设置默认显示第几章图
            this.SetTranslateX(this.config.initialSlide * -this.config.width())
            this.changePagination(this.config.initialSlide)

            // 设置轮播图切换的动画
            this.$(".swiper-wrapper").style.transitionDuration = `${this.config.speed}ms`

            if (this.config.autoPlay) {
                this.AutoPlay();
                this.$(this.config.el).onmouseover = () => clearInterval(this.config.timer)
                this.$(this.config.el).onmouseleave = () => this.AutoPlay()
            }
        }

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

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

        motion(offset) {
            var totalDistance = this.translateX() + offset;

            if (!this.config.loop) {
                if (totalDistance == -this.config.maxWidth()) {
                    console.log("移动到最后一张图了")
                    this.$(this.config.navigation.nextEl).onclick = null;
                } else {
                    this.BindNext();
                }

                if (totalDistance == 0) {
                    console.log("移动到第一张图了")
                    this.$(this.config.navigation.prevEl).onclick = null
                } else {
                    this.BindPrev()
                }
            }


            if (totalDistance < -this.config.maxWidth()) {
                totalDistance = 0
            }

            if (totalDistance > 0) {
                totalDistance = -this.config.maxWidth()
            }
            this.SetTranslateX(totalDistance)
            // 要去的下一页的下标
            var index = Math.abs(totalDistance / this.config.width())
            this.changePagination(index)
        }

        // 生成小圆点
        createdPagination() {
            if (this.$(this.config.pagination.el) != null ) {
                for (var i = 0; i < this.config.maxLength(); i++) {
                    this.$(this.config.pagination.el).innerHTML+= `
                 <div class="swiper-pagination-item ${i == 0 ? 'active' : ''}"></div>
                `
                };

                this.bindPaginationClick();
            }
        }

        bindPaginationClick() {
            var itemAll = this._(".swiper-pagination-item")
            itemAll.forEach((v,i)=> {
                v.onclick = () => {
                    this.BindNext();
                    this.BindPrev();
                    this.changePagination(i)
                }
            })
        }

        changePagination(i) {
            this.config.on.hasOwnProperty("slideChange") ? this.config.on?.slideChange(i) : ''
            var pagination = this._(".swiper-pagination-item")
            if (pagination.length != 0) {
                pagination.forEach(item => item.classList.remove("active"))
                pagination[i].classList.add("active")
                this.SetTranslateX(i * -this.config.width())
            }
        }

        slideTo(index) {
            this.SetTranslateX(index * -this.config.width())
            this.changePagination(index)
        }

        AutoPlay() {
            this.config.timer = setInterval(() => {
                if (this.config.loop) {
                    this.$(this.config.navigation.nextEl).onclick()
                } else {
                    if (this.translateX() / -this.config.width() >= this.config.maxLength()-1) {
                        this.config.fx = false
                        this.motion(this.config.width())
                    } else {
                        if (this.config.fx) {
                            this.motion(-this.config.width())
                        } else {
                            this.motion(this.config.width())
                            if (this.translateX() / -this.config.width() == 0) {
                                this.config.fx = true
                            }
                        }
                    }
                }
            },this.config.autoTime)
        }

        translateX() {
            return Number(this.$(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
        }

        SetTranslateX(distance) {
            this.$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
        }

        $(className) {
            return document.querySelector(className)
        }

        _(className) {
            return document.querySelectorAll(className)
        }


    }

    window.Swiper = Swiper
})()