first commit

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-2/swiper.js

@@ -0,0 +1,149 @@
+// 哪些功能需要自定义？
+//  是否需要自动播放
+//  设置自动播放的时间间隔
+//  可以设置默认显示第几张
+//  如果不写html，就不需要对应的功能
+//  可以js编程控制轮播图滚动到第几张
+//   当轮播图滚动的时候要抛出当前下标
+
+class Swiper {
+    //设置默认选项
+    defaultOption = {
+        TimeId: null,
+        autoPlay: false,
+        time: 100,
+        initialSlide: 0,
+        el: '.swiper',
+        on: {},
+        // length: () => {
+        //     //获取li标签的长度 
+        //     console.log(this._f(".banner_ul li").length);
+        //     return this._f(".banner_ul li").length
+
+        // }
+
+        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.next()
+        this.prev()
+        this.sport()
+        this.click()
+    }
+    next() {
+        //var xxx = this; 保存this指向
+
+        //当前this属于next()
+        this.click(".button_right", (v, i) => {
+            //console.log(this);
+            //console.log(v,i);
+            this.sport(1)
+        })
+    }
+    prev() {
+        this.click(".button_left", (v, i) => {
+            //console.log(v,i);
+            this.sport(-1)
+        })
+    }
+
+
+    click(className, callback) {
+        //this._f(className).forEach((v,i) => v.onclick = () => callback(v,i))
+        //批量绑定点击事件
+        this._f(className).forEach((v, i) => {
+            v.onclick = () => {
+                //  console.log("s");
+                //把数据回传出去 v,i
+                callback(v, i)
+            }
+        })
+    }
+    slideTo(index) {
+        this.changeActive(index)
+    }
+    //移动
+    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.changeActive(this.defaultOption.initialSlide)
+        }
+    }
+    //todo 图片添加了active 但是没有删掉上一次的active
+
+    changeActive(i) {
+        this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
+
+        if(this.$f(".banner_dot") != null){
+            this._f(".banner_dot i").forEach(val => {
+                val.classList.remove("active")
+            })
+            this._f(".banner_dot i")[i].classList.add("active")
+        }
+
+      //  this.$f(".banner_dot").style.left = `${i * -this.defaultOption.width()}px`
+
+        // this._f(".banner_dot i").forEach(val => {
+        //     console.log(this._f(".banner_dot i"));
+        //     val.classList.remove("avtive")
+        // })
+        // this._f(".banner_dot i")[i].classList.add("active");
+        // console.log( this._(".banner_dot i")[i]);
+    }
+
+    renderOot(){
+        for (var i = 0; i<this.defaultOption.length(); i++ ){
+            this.$f(".banner_dot").innerHTML +=`
+                <li class="${i == this.defaultOption.initialSlide ? 'active' : ''}"></li>
+
+            `
+        }
+        this.click(".banner_dot i",(v,i) => this.changeActive(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);
+    }
+}