first commit

历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index2.js

@@ -0,0 +1,208 @@
+// // 自执行函数
+// // 好处？
+//
+
+class Swiper {
+
+    defaultOption = {
+        TimeId: null,
+        autoPlay: false,
+        time: 1000,
+        initialSlide: 0, // 实现了
+        el: '.swiper',
+        on: { },
+        length: () => this._f(`.swiper_wrap li`).length,
+        width: () => this.$f(``).offsetWidth,
+        initSlideLeft: () => {
+            this.$f(".swiper_wrap").style.left = `${
+                this.defaultOption.initialSlide * -this.defaultOption.width()
+            }px`
+        }
+    }
+
+    // 构造函数里面接受
+    constructor (el, option) {
+
+        if (el.length == 0 || this.$(el) == null) {
+            console.error(`类名:${el}不存在，请检查`);
+        } else {
+            this.defaultOption.el = el || this.defaultOption.el;
+            this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay;
+            this.defaultOption.time = option.time || this.defaultOption.time;
+            this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
+            if (option.hasOwnProperty("on")) {
+                this.defaultOption.on = option.on
+            }
+            this.init()
+        }
+      
+    }
+
+    init() {
+        this.defaultOption.initSlideLeft()
+        if (this.$f(".button") != null) {
+            this.next()
+            this.prev()
+        }
+
+        this.defaultOption.autoPlay 
+          ? this.autoPlay()
+          : ''
+
+        this.$f(".dot") == null ? '' :  this.renderDot()
+        
+    }
+
+    next() {
+        this.click(".right", (v) => this.sport(1))
+    }
+
+    prev() {
+        this.click(".left", v => this.sport(-1))
+    }
+
+
+    changeDotActive(i) {
+        this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
+
+        if (this.$f(".dot") != null) {
+            this._f(".dot li").forEach(val =>  val.classList.remove("active"))
+            this._f(".dot li")[i].classList.add("active")
+        }
+        this.$f(".swiper_wrap").style.left = `${i * -this.defaultOption.width()}px`
+    }
+
+    renderDot() {  
+        for (var i = 0; i < this.defaultOption.length(); i++) {
+            this.$f(".dot").innerHTML += `
+             <li class="${i == this.defaultOption.initialSlide ? 'active' : '' }"></li>
+            `
+        }
+        this.click(".dot li", (v,i) => this.changeDotActive(i))
+    }
+
+    autoPlay() {
+        this.defaultOption.TimeId = setInterval(() => this.sport(1), this.defaultOption.time)
+        this.$f("").onmouseover = () => clearInterval(this.defaultOption.TimeId)
+        this.$f("").onmouseout = () => this.autoPlay()
+    }
+
+    sport(offset) {
+        this.defaultOption.initialSlide += offset
+
+        if (this.defaultOption.initialSlide < 0) {
+            this.defaultOption.initialSlide = 0
+        }
+        if (this.defaultOption.initialSlide > this.defaultOption.length() - 1) {
+            this.defaultOption.initialSlide = this.defaultOption.length() - 1
+        }
+        if (this.defaultOption.initialSlide >= 0 && this.defaultOption.initialSlide <= this.defaultOption.length() - 1) {
+            this.changeDotActive(this.defaultOption.initialSlide)
+        }
+    }
+
+    slideTo(index) {
+        this.changeDotActive(index)
+    }
+
+    click(className, callback) {
+        this._f(className).forEach((v,i) => v.onclick = () => callback(v,i))
+    }
+
+
+    
+    $f(className) {
+        return this.$(`${this.defaultOption.el} ${className}`)
+    }
+
+    _f(className) {
+        return this._(`${this.defaultOption.el} ${className}`)
+    }
+
+
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+}
+
+// 为什么要 new 
+//  x 类的 实例
+// var x = new Swiper(1000);
+// x.test()
+
+
+// 哪些功能需要自定义？
+//  是否需要自动播放
+//  设置自动播放的时间间隔
+//  可以设置默认显示第几张
+//  如果不写html，就不需要对应的功能
+//  可以js编程控制轮播图滚动到第几张
+//   当轮播图滚动的时候要抛出当前下标
+
+
+// this 指向
+//   函数执行的时候才能确定this到底指向谁, 
+//    实际上this的最终指向的是那个调用它的对象
+// var time = 4000
+
+// var a = {
+//     time: 2000,
+//     b: () => {
+//         this.time = 5000;
+//         var test = () => {
+//             console.log(this.time);
+//         }
+
+//         return test
+//     }
+// }
+
+// var dddd = a.b()
+// dddd()
+
+
+// 箭头函数  和  普通函数的区别
+
+//  如何改变this 指向？？
+ //  https://www.runoob.com/w3cnote/js-call-apply-bind.html
+
+
+
+ // 继承
+
+//  class car {
+//     color = "red";
+//     speed = null;
+//     start() {}
+//     stop() {}
+//  }
+
+
+//  class mtc extends car {
+
+//     constructor(dddd) {
+//         super()
+//         this.par = dddd
+//         console.log(this.par);
+//     }
+
+//     size() {
+//         console.log("摩托车很小：",this.color);
+//     }
+//  }
+
+
+//  class jhc extends car {
+//     rescue() {
+//         console.log("救人");
+//     }
+//  }
+
+//  var mt = new mtc("1")
+// //  mt.size()