ClassContent/历届学生/fontendseven/项目练习/上课项目/轮播图/plugs/index.js

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

    class Swiper {
        constructor(el, option) {
            
            // 插件的默认配置参数
            this.defaultOption = {
                timer: null,
                el: '.swiper-container',
                wrapper: '.swiper-wrapper',
                slide: '.swiper-slide',
                loop: false,
                autoPlay: false, // 完成
                autoTime: 3000, // 完成
                initialSlide: 0, // 完成
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                length: function () {
                    return _(`${this.el} ${this.slide}`).length - 1;
                },
                width: function () {
                    return $(this.el).offsetWidth;
                },
                container: function() {
                    return $(this.el);
                },
                wrap: function(offset) {
                    return $(`${this.el} ${this.wrapper}`).left(offset)
                },
                next: function () {
                    return $(`${this.el} ${this.navigation.nextEl}`)
                },
                prev: function () {
                    return $(`${this.el} ${this.navigation.prevEl}`)
                },
                pag: function () {
                    return $(`${this.el} ${this.pagination.el}`)
                },
                child: function () {
                    return _(`${this.el} ${this.pagination.el} ${this.pagination.child}`)
                },
                pagination: {
                    el: '.swiper-pagination',
                    child: '.pagination'
                },
                // 事件控制中心
                EventController: {
                }
               
            }
            // 必传参数的校验
            if (typeof el == "string" && document.querySelector(el) != null) {

               
                // 可选参数
                this.defaultOption.el = el || this.defaultOption.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;
                

                for (const key in option.on) {
                    this.defaultOption.EventController[key] = option.on[key]
                }
                
                this.defaultOption.navigation.nextEl = option?.navigation?.nextEl || this.defaultOption.navigation.nextEl;
                this.defaultOption.navigation.prevEl = option?.navigation?.prevEl || this.defaultOption.navigation.prevEl;
                this.defaultOption.pagination.el = option?.pagination?.el || this.defaultOption.pagination.el;
                

                if (this.defaultOption.initialSlide > this.defaultOption.length()) {
                    throw new Error("initialSlide 下标不合理")
                }

                // console.log();
                this.init();
            } else {
                throw new Error("el必须是字符串，且class类名有效！！")
            }
        }

        init() {
            this.prototypeMethods()
            this.createdPagination()
            this.setInitialSlide()
            this.next()
            this.prev()

            this.defaultOption.autoPlay ? this.autoPlay() : ''

            this.defaultOption.autoPlay 
              ? this.defaultOption.container().onmouseout = () => this.autoPlay()
              : ''

            this.defaultOption.container().onmouseover = () => clearInterval(this.defaultOption.timer);
        }


        /**
         * 下一页按钮的点击事件
         */
        next() {
            this.defaultOption.next().onclick = () => {
                this.motion(-this.defaultOption.width())
            }
        }

        prev() {
            this.defaultOption.prev().onclick = () => {
                this.motion(this.defaultOption.width())
            }
        }

        setInitialSlide() {
            this.defaultOption.wrap(this.defaultOption.initialSlide * -this.defaultOption.width())
            this.changePagination(this.defaultOption.initialSlide)
        }

        motion(offset) {
            var maxOffset = -this.defaultOption.length() * this.defaultOption.width();
            var totalOffset = this.defaultOption.wrap() + offset;
            
            if (totalOffset > 0) {
                this.defaultOption.loop ? totalOffset = maxOffset : totalOffset = -0
            }

            if (totalOffset < maxOffset) {
                this.defaultOption.loop ? totalOffset = 0 : totalOffset = maxOffset
            }


            this.defaultOption.EventController.slideChange && 
            this.defaultOption.EventController.slideChange(
                Math.abs(totalOffset / this.defaultOption.width())
            )

            this.changePagination(totalOffset / this.defaultOption.width() * -1)
            this.defaultOption.wrap(totalOffset)
        }

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

            this.defaultOption.child().forEach((v, i) => {
                v.onclick = () => {
                    this.changePagination(i)
                    this.defaultOption.wrap(i * -this.defaultOption.width())
                }
            })
        }

        changePagination(index) {
            var pagination = this.defaultOption.child()
            pagination.forEach(v => {
                v.classList.remove("active")
            })
            pagination[index].classList.add("active");
        }

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

        on(methodsName, callback) {
            this.defaultOption.EventController[methodsName] = callback
        }

        slideTo(index) {
            this.changePagination(index)
            this.defaultOption.wrap(index * -this.defaultOption.width())
        }


        prototypeMethods() {
            HTMLDivElement.prototype.left = function (offset) {
                if (this.className.includes("swiper-wrapper")) {
                    if (offset == undefined) {
                        return parseInt(this.style.left)
                    } else {
                        this.style.left = `${offset}px`
                    }
                }
               
                return null
            }
        }
    }

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

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

    window.Swiper = Swiper
})()