first commit

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

@@ -0,0 +1,216 @@
+// 保护
+(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;
+
+})()