first commit

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

@@ -0,0 +1,204 @@
+// 自执行函数
+// 闭包
+(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
+})()
+