first commit

历届学生/18课程/class18/课程/2020-10-23/swiper.js

@@ -0,0 +1,262 @@
+(function () {
+
+    // 默认参数
+    // slideChangeTransitionStart【完成】
+    // slideTo【完成】
+    var defaultConf = {
+        reverse: false,
+        timer: '', // 保存自动播放的定时器
+        ParentElement: '.swiper-container',
+        config: {
+            loop: false, // 是否开启循环播放【完成】
+            time: 1,     // 自动播放的间隔事件【完成】
+            speed: 500,  // 切换轮播图时候用的时间【完成】
+            grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
+            initialSlide: 0, // 默认显示第一个【完成】
+            auto: false, // 是否开启自动播放【完成】
+        },
+        // 小圆点的父标签选择器名称
+        pagination: {
+            el: '.swiper-pagination',
+        },
+        navigation: {
+            nextEl: '.swiper-button-next', // 下一页
+            prevEl: '.swiper-button-prev', // 上一页
+        },
+    }
+
+    /**
+     * 构造函数
+     * @param {*} ParentElement 父节点的选择器名称
+     * @param {*} Configuration 插件的自定义设置项
+     */
+    function Swiper(ParentElement, Configuration) {
+        defaultConf.ParentElement = ParentElement || defaultConf.ParentElement;
+        defaultConf.config.loop = Configuration.loop || defaultConf.config.loop;
+        defaultConf.config.time = Configuration.time || defaultConf.config.time;
+        defaultConf.config.speed = Configuration.speed || defaultConf.config.speed;
+        defaultConf.config.grabCursor = Configuration.grabCursor || defaultConf.config.grabCursor;
+        defaultConf.config.initialSlide = Configuration.initialSlide || defaultConf.config.initialSlide;
+        defaultConf.config.auto = Configuration.auto || defaultConf.config.auto;
+        console.log(Configuration);
+        this.slideArr = this._(".swiper-wrapper .swiper-slide");
+
+        // 最外层 swiper-container 宽度
+        this.f = this.$(defaultConf.ParentElement).offsetWidth;
+
+        // 判断小圆点
+        if (Configuration.hasOwnProperty("pagination")) {
+            defaultConf.pagination.el = Configuration.pagination.el;
+            this.RenderDot()
+        }
+
+        // 判断使用自定义前进后退按钮
+        if (Configuration.hasOwnProperty("navigation")) {
+            this.RenderNavigation()
+            //判断下一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("nextEl")) {
+                defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
+            }
+            //判断上一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("prevEl")) {
+                defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
+            }
+        }
+
+        this.UserConfig = Configuration
+        this.init()
+    }
+
+
+    // 类的方法
+    Swiper.prototype = {
+        init: function () {
+            this.SetWrapperWidth();
+            defaultConf.config.auto ? this.AutoPlay() : '';
+            this.initSwiperSlide()
+        },
+        // 设置swiper-slide父类的宽度
+        SetWrapperWidth: function () {
+
+            // 计算swiper-slide的宽度
+            this.slideArr.forEach(v => v.style.width = `${this.f}px`)
+            this.$(".swiper-wrapper").style = `
+                width: ${this.f * this.slideArr.length}px;
+                left: -${this.f * defaultConf.config.initialSlide}px;
+                transition: all ease ${defaultConf.config.speed / 1000}s;
+                cursor: ${defaultConf.config.grabCursor ? 'pointer' : ''} ;
+            `
+        },
+
+        /**
+         * 注册移动端滑动
+         */
+        initSwiperSlide: function() {
+            var fa = this.$(defaultConf.ParentElement),
+                startX = 0;
+                
+            fa.addEventListener('touchstart', function(e) {
+                startX = e.targetTouches[0].pageX
+                console.log("开始下标：", startX);
+            })
+
+            // fa.addEventListener("touchmove",(e) => {
+            //     var x = e.changedTouches[0].pageX;
+            //     console.log(e.changedTouches[0].pageX);
+            //     this.$(".swiper-wrapper").style.left = `${-(x)}px`
+            // })
+
+            fa.addEventListener('touchend', (e) => {
+               console.log();
+               var endX = e.changedTouches[0].pageX
+               console.log("结束下标：", endX);
+               // 左滑
+               if (endX < startX) {
+                   console.log("左滑");
+                   this.animation(-this.f)
+               } else {
+                   console.log("右滑");
+                   this.animation(this.f)
+               }
+            })
+        },
+
+        // 生成小圆点
+        RenderDot: function () {
+            this.slideArr.forEach((v, i) => {
+                this.$(defaultConf.pagination.el).innerHTML +=
+                    `
+                    <div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
+                `
+            });
+
+            var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
+            Dot.forEach((v, i) => {
+                v.onclick = () => {
+                    this.UserConfig.pagination && this.ChangeDotActive(i)
+                    this.$(".swiper-wrapper").style.left = `-${i * this.f}px`;
+                }
+            })
+        },
+
+        // 渲染左右前进后退按钮
+        RenderNavigation: function () {
+            var prev = this.$(defaultConf.navigation.prevEl);
+            var next = this.$(defaultConf.navigation.nextEl);
+            prev.innerText = "<";
+            next.innerText = ">";
+            this.BindNavigationClick(prev, next)
+        },
+
+        // 为上一页下一页按钮绑定切换事件
+        BindNavigationClick() {
+            // var a = this
+            // 下一页
+            this.$(defaultConf.navigation.nextEl).onclick = () => {
+                this.animation(-this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+            // 上一页
+            this.$(defaultConf.navigation.prevEl).onclick = () => {
+                this.animation(this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+        },
+
+        // 切换动画
+        animation(offset) {
+            var swiperWrapper = this.$(".swiper-wrapper");
+            var y = parseInt(swiperWrapper.style.left) + offset,
+                max = -(this.f * (this.slideArr.length - 1));
+
+            // 如果时最后一张图    
+            if (y < max) {
+                console.log("如果时最后一张图");
+                if (defaultConf.config.loop) {
+                    swiperWrapper.style.left = "0px";
+                } else if (defaultConf.config.auto) {
+                    defaultConf.reverse = true
+                    this.animation(this.f)
+                }
+                return;
+
+                // 判断是不是第一张图    
+            } else if (y > 0) {
+                if (defaultConf.config.loop == false && defaultConf.config.auto) {
+                    defaultConf.reverse = false
+                    swiperWrapper.style.left = `${y - this.f*2}px`
+                }
+                if (defaultConf.config.loop) {
+                    swiperWrapper.style.left = `${max}px`
+                }
+                return
+            } else {
+                if (defaultConf.config.loop == false 
+                    && defaultConf.config.auto
+                    &&  defaultConf.reverse) {
+                    swiperWrapper.style.left = `${y}px`
+                } else {
+                    swiperWrapper.style.left = `${y}px`
+                }
+                
+            }
+        },
+
+        ChangeDotActive(type = null) {
+            var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
+            var index = "";
+            if (type == null) {
+                var TotalLeft = Math.abs(parseInt(this.$(".swiper-wrapper").style.left));
+                index = TotalLeft / this.f;
+            } else {
+                index = type;
+            }
+
+            // 实现调用用户传入的方法，返回下标给用户
+            this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
+
+            // 清除所有的激活样式
+            Dot.forEach(val => val.className = "swiper-dot");
+            // 为你点击的li加激活样式
+            Dot[index].className = "swiper-dot swiper-active";
+        },
+
+        AutoPlay() {
+            defaultConf.timer = setInterval(() => {
+                if (defaultConf.config.loop == false 
+                    && defaultConf.config.auto
+                    &&  defaultConf.reverse) {
+                        this.animation(this.f)
+                } else {
+                    this.animation(-this.f)
+                }
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }, defaultConf.config.time * 1000)
+
+            this.$(defaultConf.ParentElement).onmouseover = function () {
+                clearInterval(defaultConf.timer)
+            }
+
+            this.$(defaultConf.ParentElement).onmouseout = () => {
+                this.AutoPlay()
+            }
+        },
+
+        // 通过js调用此方法，实现轮播图的切换
+        slideTo(index) {
+            this.$(".swiper-wrapper").style.left = `-${index * this.f}px`;
+            this.UserConfig.pagination && this.ChangeDotActive()
+        },
+        $: function (className) {
+            return document.querySelector(className)
+        },
+        _: function (className) {
+            return document.querySelectorAll(className)
+        }
+    }
+
+
+    window.swiper = Swiper
+
+
+})()