first commit

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/config/index.js

@@ -0,0 +1,12 @@
+var Config = {
+  DevelopmentPhase: 'dev', // dev, test, prod
+  DevUrl: 'http://127.0.0.1:3000/api/json',
+  TestUrl: 'http://127.0.0.1:3000/api/json/test',
+  ProdUrl: 'http://127.0.0.1:3000/api/json/prod',
+  ApiList: {
+    index: '/index',
+    info: '/info',
+    class: '/class',
+    classList: '/classList'
+  }
+}

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/http/index.js

@@ -0,0 +1,76 @@
+(function (){
+
+  class Ajax {
+
+    constructor() {
+      this.ajax = new XMLHttpRequest();
+    }
+
+    async get(option) {
+      var params = ""
+      for(var key in option.data) {
+        params+= `&${key}=${option.data[key]}`
+      }
+      params = params.replace("&", "?")
+      option.url = this.checkBaseUrl() + option.url + params
+      this.ajax.open("GET", option.url)
+      this.ajax.send()
+      return await this.readystatechange();
+    }
+
+    post(option) {
+      this.ajax.open("POST", this.checkBaseUrl() + option.url)
+      this.ajax.setRequestHeader("Content-Type","application/json")
+      this.ajax.send(JSON.stringify(option.data))
+      return this.readystatechange()
+    }
+
+    readystatechange() {
+      return new Promise( (success,error) => {
+        this.ajax.onreadystatechange =  () => {
+          if (this.ajax.readyState == 4) {
+            if (this.ajax.status == 200) {
+
+              // 如果后端给的数据是string，才进行 JSON.parse
+              var result = typeof this.ajax.responseText == "string"
+                ? JSON.parse(this.ajax.responseText)
+                : this.ajax.responseText;
+
+              switch (result.status) {
+                case 200:
+                  success(result.data)
+                  break;
+                case 500:
+                  error(result.msg)
+                  break;
+                default:
+              }
+            } else {
+              error("请求出错")
+            }
+          }
+        }
+      })
+    }
+
+    checkBaseUrl() {
+      switch (Config.DevelopmentPhase) {
+        case "dev":
+          return Config.DevUrl;
+          break;
+        case "test":
+          return Config.TestUrl;
+          break;
+        case "prod":
+          return Config.ProdUrl;
+          break
+      }
+    }
+  }
+
+
+  window.$get = new Ajax().get.bind(new Ajax());
+  window.$post = new Ajax().post.bind(new Ajax());
+
+
+})()

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/editClass.js

@@ -0,0 +1,80 @@
+class editClass {
+    constructor () {
+        this.defaultChioose = JSON.parse(localStorage.getItem("classList"));
+        this.YourChioose = 
+         localStorage.getItem("YourChioose") == null 
+         ? []
+         : JSON.parse(localStorage.getItem("YourChioose"));
+
+        this.RenderDefault()
+        this.RenderAdd()
+
+    }
+
+    RenderDefault () {
+        utils.$(".you_chioose .chiooseWrap").innerHTML = "";
+        this.defaultChioose.forEach(v => {
+            utils.$(".you_chioose .chiooseWrap").innerHTML+=
+            `<li>${v.title}</li>`
+        });
+
+        document.querySelectorAll(".you_chioose .chiooseWrap li").forEach((v,i)=>{
+            v.onclick = () => {
+                console.log(i);
+                // 获取你点击的数据
+                this.YourChioose = [...this.YourChioose,this.defaultChioose[i]];
+                localStorage.setItem("YourChioose", JSON.stringify(this.YourChioose))
+                this.RenderAdd()
+
+                // 从原数据里面删除你点击的数据
+                this.defaultChioose = this.defaultChioose.filter((v)=>{
+                    if (this.defaultChioose[i].id != v.id) {
+                        return v
+                    }
+                })
+
+                localStorage.setItem("classList", JSON.stringify(this.defaultChioose))
+
+                this.RenderDefault()
+            }
+        })
+    }
+
+
+    RenderAdd() {
+        utils.$(".chioose_list .chiooseWrap").innerHTML = "";
+        if (localStorage.getItem("YourChioose") != null) {
+            var a = JSON.parse(localStorage.getItem("YourChioose"));
+            
+            a.forEach(v=> {
+                utils.$(".chioose_list .chiooseWrap").innerHTML+=
+                `
+                 <li>${v.title}</li>
+                `
+            });
+
+            document.querySelectorAll(".chioose_list .chiooseWrap li").forEach((v,i)=>{
+                v.onclick = () => {
+                    console.log(v);
+                    // 获取点击对象
+                    this.defaultChioose = [...this.defaultChioose,this.YourChioose[i]];
+                    localStorage.setItem("classList", JSON.stringify(this.defaultChioose))
+                    this.RenderDefault()
+    
+    
+                     // 从原数据里面删除你点击的数据
+                     this.YourChioose = this.YourChioose.filter((v)=>{
+                        if (this.YourChioose[i].id != v.id) {
+                            return v
+                        }
+                    })
+                    localStorage.setItem("YourChioose", JSON.stringify(this.YourChioose))
+                    this.RenderAdd()
+                }
+            })
+
+        };
+    }
+}
+
+new editClass()

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/home.js

@@ -0,0 +1,170 @@
+class Home {
+    constructor() {
+        this.Swiper = null;
+        this.Menu = null;
+        this.TabsList = [
+            { id: -1, title: '首页' },
+        ]
+        this.initSwiper();
+        this.GetClass();
+    }
+
+    /**
+     * 获取首页的数据
+     */
+    async GetIndex() {
+        var data = await homeService.index();
+
+        data.model.list.forEach(v => {
+            utils.$(".modeList").innerHTML +=
+                `
+            <li>
+                <div class="top">
+                    <img src="${v.preview}" alt="">
+                    <span>${v.total}</span>
+                </div>
+                <p>${v.title}</p>
+            </li>
+            `
+        })
+
+        utils.$(".news ul").innerHTML = utils.item(data.newest.list)
+        utils.$(".recommended ul").innerHTML = utils.item(data.recommended.list)
+
+    }
+
+    /**
+     * 初始化轮播图
+     */
+    initSwiper() {
+        this.Swiper = new Swiper({
+            el: '.swiper-container',
+            initialSlide: 0
+        });
+    }
+
+
+    /**
+     * 获取分类
+     */
+    async GetClass() {
+        var classList = [];
+        if (localStorage.getItem("classList") == null) {
+            classList = await homeService.class();
+            localStorage.setItem("classList", JSON.stringify(classList));
+        } else {
+            classList = JSON.parse(localStorage.getItem("classList"))
+        }
+
+        this.TabsList = [...this.TabsList, ...classList];
+        console.log(this.TabsList);
+
+        this.RenderSlide()
+        this.RenderMenu();
+        // 获取首页的数据
+        this.GetIndex();
+    }
+
+
+    RenderSlide() {
+        this.TabsList.forEach((v, i) => {
+            if (i != 0) {
+                utils.$(".swiper-wrapper").innerHTML +=
+                    `
+                <div class="swiper-slide">
+                    <div class="newList padding_30">
+                        <ul>
+                           
+                        </ul>
+                    </div>
+                </div>
+                `
+            }
+        });
+
+        var newList = document.querySelectorAll(".swiper-slide")
+        var self = this;
+        newList.forEach((v, i) => {
+            if (i > 0) {
+                v.addEventListener("scroll", function () {
+                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                        console.log("到底了: ", self.TabsList[i]);
+                        self.TabsList[i].page += 1;
+                        if (self.TabsList[i].page <= self.TabsList[i].totalPage) {
+                            self.GetClassList(i,'more')
+                        }
+                    }
+                })
+            }
+        })
+    }
+
+    /**
+     * 渲染菜单
+     */
+    RenderMenu() {
+        this.TabsList.forEach((v, i) => {
+            utils.$(".header_menu ul").innerHTML +=
+                `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
+        });
+
+        var Li = document.querySelectorAll(".header_menu ul li");
+
+        // 轮播图切换的时候，改变li的激活样式
+        this.Swiper.on("slideChange", (index) => {
+            this.GetClassList(index)
+            Li.forEach(t => t.classList.remove("active"))
+            Li[index].classList.add("active")
+        });
+
+        // 点击li的时候，切换轮播图，并改变li激活样式  
+        Li.forEach((v, i) => {
+            v.onclick = () => {
+                this.GetClassList(i)
+                Li.forEach(t => t.classList.remove("active"))
+                this.Swiper.slideTo(i);
+                v.classList.add("active")
+            }
+        });
+    }
+
+
+    /**
+     * 获取分类的列表
+     */
+    GetClassList(index, type = "click") {
+        var getData = async () => {
+            var data = await homeService.classList({
+                id: this.TabsList[index].id,
+                page: this.TabsList[index].page
+            });
+
+            // 存储改分类的总页数
+            this.TabsList[index].totalPage = data.total_page
+
+            // 合并数据
+            this.TabsList[index].content =
+            [
+                ...this.TabsList[index].content
+                ,
+                ...data.list
+            ];
+
+            var Silde = utils.$(".swiper-wrapper .swiper-slide");
+
+            // 向内容中插入li标签
+            Silde[index].querySelector("ul").innerHTML += utils.item(data.list)
+        }
+
+        if (type == "click") {
+            // 不是首页，并且没有数据，才发送请求
+            if (this.TabsList[index].id != -1 && this.TabsList[index].content.length == 0) {
+                getData()
+            }
+        } else {
+            getData()
+        }
+    }
+}
+
+new Home()

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/info.js

@@ -0,0 +1,89 @@
+class info {
+    constructor() {
+        this.page = 1;
+        this.totalPage = null;
+        this.res = {};
+        this.LikeArr =
+            localStorage.getItem("LikeList") == null
+                ? []
+                : JSON.parse(localStorage.getItem("LikeList"));
+
+        this.GetInfo();
+        this.Like()
+    }
+
+    async GetInfo() {
+        this.res = await infoService.info({
+            id: utils.GetQueryString("id"),
+            page: this.page
+        });
+        // 渲染详情图片
+        this.res.list.forEach((v) => {
+            utils.$(".info").innerHTML +=
+                `<img src="${v.src}" alt="">`
+        })
+        this.totalPage = this.res.total_page
+
+        utils.$(".news ul").innerHTML = utils.item(this.res.recommend)
+        utils.$(".relevant ul").innerHTML = utils.item(this.res.relevant)
+
+        console.log(this.res);
+
+        utils.$(".next_page").onclick = () => {
+            this.page += 1;
+            if (this.page <= this.totalPage) {
+                this.GetInfo()
+                if (this.page == this.totalPage) {
+                    utils.$(".next_page").style.display = "none"
+                }
+            } else {
+                utils.$(".next_page").style.display = "none"
+            }
+        }
+    }
+
+    Like() {
+        var like = document.querySelector(".like");
+        var isLike = this.LikeArr.filter(v => {
+            if (v.id == utils.GetQueryString("id")) {
+                return v
+            }
+        });
+
+        // 收藏过了
+        if (isLike.length != 0) {
+            like.className = "like iconfont icon-aixin";
+        }
+
+        like.onclick = () => {
+            // 进行收藏 
+            if (like.className.indexOf("icon-xin") != -1) {
+                like.className = "like iconfont icon-aixin";
+                this.LikeArr.push({
+                    id: utils.GetQueryString("id"),
+                    title: this.res.title,
+                    source: this.res.source,
+                    total: this.res.total,
+                    info: this.res.info,
+                    src: this.res.list[0].src,
+                    total: this.res.total,
+                })
+                localStorage.setItem("LikeList", JSON.stringify(this.LikeArr))
+                // 取消收藏 
+            } else {
+                console.log("1111111");
+                like.className = "like iconfont icon-xin";
+                this.LikeArr = this.LikeArr.filter(v => {
+                    if (v.id != utils.GetQueryString("id")) {
+                        return v
+                    }
+                });
+
+                localStorage.setItem("LikeList", JSON.stringify(this.LikeArr))
+
+            }
+        }
+    }
+}
+
+new info()

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/CarService.js

@@ -0,0 +1,3 @@
+class CarService {
+
+}

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/HomeService.js

@@ -0,0 +1,34 @@
+class HomeService {
+
+  async index(data = {}) {
+    return await $get({
+      url: Config.ApiList.index,
+      data: data
+    });
+  }
+
+  async class(data = {}) {
+    var data = await $get({
+      url: Config.ApiList.class,
+      data: data
+    });
+
+    data.forEach(v => {
+      v.page = 0;
+      v.content = [];
+      v.totalPage = 0;
+    });
+
+    return data;
+  }
+
+  async classList(data = {}) {
+    return await $get({
+      url: Config.ApiList.classList,
+      data: data
+    });
+  }
+
+}
+
+var homeService = new HomeService();

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/InfoService.js

@@ -0,0 +1,11 @@
+class InfoService {
+
+    async info(data = {}) {
+      return await $get({
+        url: Config.ApiList.info,
+        data: data
+      });
+    }
+  }
+  
+  var infoService = new InfoService();

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/service/笔记.txt

@@ -0,0 +1,14 @@
+1：页面调用 service 中的方法
+   service 中的方法调用 ajax，来发送请求
+
+2：ajax把数据给service的方法，service可以对数据进行各种
+   业务上的处理
+
+3：处理好后给页面使用
+
+
+
+如何拿到异步函数的返回数值
+
+1：callback
+2：Promise

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/utils/index.js

@@ -0,0 +1,100 @@
+class Utils {
+
+    /**
+     * 根据数据渲染标准的item结构
+     * @param {*} arr 
+     */
+    item(arr) {
+        var html = "";
+        arr.forEach(v => {
+            html += `
+                <li>
+                   <a href="./info.html?id=${v.id}">
+                   <div class="newList_img">
+                        <img src="${v.preview}" alt="${v.title}">
+                        ${
+                            v.hasOwnProperty("total")
+                            ? `<span>${v.total}套</span>`
+                            : ''
+                        }
+                    </div>
+                    <div class="newList_text">
+                        <p class="t">${v.title}</p>
+                        ${
+                            v.hasOwnProperty("user")
+                            ? `<div class="source">${v.user}</div>`
+                            : ''
+                        }
+
+                        ${
+                            v.hasOwnProperty("source")
+                            ? `<div class="source">${v.source}</div>`
+                            : ''
+                        }
+
+                        ${
+                            v.hasOwnProperty("tags")
+                            ?  `<div class="tags">
+                            ${(v.tags.map((t) => {
+                                return 
+                                `<div class="tags_item">${t.title}</div>`
+                            })).toString().replace(/,/ig, " ")
+                            }
+                            </div>`
+                            : ""    
+                        }
+                       
+                    </div>
+                        </a>
+                </li>
+            `
+        });
+
+        return html
+    }
+
+    
+
+    $(className) {
+        var classNameArr = className.split(" ");
+        if (classNameArr.length == 1) {
+            return document.querySelector(className)
+        } else {
+            // 多类名的时候，获取最后一个类名的上一个类名
+            var fatherClassName = classNameArr[classNameArr.length - 2];
+            // 获取最后一个类名
+            var lastClassName = classNameArr[classNameArr.length - 1];
+            var NewArr = []
+            // 获取父级有多少个子元素
+            var childrenList = document.querySelector(fatherClassName).children;
+            // 返回你要的子元素
+            for (let i = 0; i < childrenList.length; i++) {
+                if (
+                    childrenList[i].className.indexOf(lastClassName.replace(".", "")) != -1
+                    ||
+                    childrenList[i].localName == lastClassName
+                ) {
+                    NewArr.push(childrenList[i])
+                }
+            }
+
+            return NewArr.length == 1 ? NewArr[0] : NewArr
+            // // 如果只有一个，返回html
+            // if (NewArr.length == 1) {
+            //   return NewArr[0]
+            // // 多个直接返回数组
+            // } else {
+            //   return NewArr
+            // }
+        }
+
+    }
+
+    GetQueryString(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]); return null;
+    }
+}
+
+var utils = new Utils();

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/utils/rem.js

@@ -0,0 +1,22 @@
+!(function(win, doc) {
+    function setFontSize() {
+        var winWidth = window.innerWidth;
+        doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
+    }
+    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
+    var timer = null;
+    win.addEventListener(evt, function() {
+        clearTimeout(timer);
+        timer = setTimeout(setFontSize, 300);
+    }, false);
+
+    win.addEventListener("pageshow", function(e) {
+        if (e.persisted) {
+            clearTimeout(timer);
+            timer = setTimeout(setFontSize, 300);
+        }
+    }, false);
+
+    //初始化 
+    setFontSize();
+}(window, document));

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/utils/swiper.js

@@ -0,0 +1,351 @@
+(function () {
+
+  // 插件的默认参数
+  var defaultOption = {
+    el: '.swiper-container',
+    reverse: true,
+    eventBus: {},
+    timer: null,
+    statusCallChangeX: true,
+    containerWidth: function () {
+      return $(this.el).clientWidth
+    },
+    loop: false, // false 不开启， true 开启
+    autoPlay: false,
+    autoTime: 300,
+    speed: 300,
+    direction: 'horizontal',
+    initialSlide: 0,
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+    pagination: {
+      el: '.swiper-pagination',
+    }
+  };
+
+
+  // 模拟类
+  function Swiper(option) {
+    if (option.hasOwnProperty("el") && option.el.length != 0) {
+      defaultOption.el = option.el;
+      defaultOption.loop = option.loop || defaultOption.loop;
+      defaultOption.autoPlay = option.autoPlay || defaultOption.autoPlay;
+      defaultOption.autoTime = option.autoTime || defaultOption.autoTime;
+      defaultOption.speed = option.speed || defaultOption.speed;
+      defaultOption.direction = option.direction || defaultOption.direction;
+      // defaultOption.initialSlide = option.initialSlide || defaultOption.initialSlide;
+      defaultOption.speed = option.speed || defaultOption.speed;
+
+      if (option.hasOwnProperty("initialSlide")) {
+        defaultOption.initialSlide = option.initialSlide
+      } else {
+        defaultOption.initialSlide = null
+      }
+
+      if (option.hasOwnProperty("navigation")) {
+        if (option.navigation.hasOwnProperty("nextEl")) {
+          defaultOption.navigation.nextEl = option.navigation.nextEl
+        }
+
+        if (option.navigation.hasOwnProperty("prevEl")) {
+          defaultOption.navigation.prevEl = option.navigation.prevEl
+        }
+      }
+
+      if (option.hasOwnProperty("on")) {
+        for (const key in option.on) {
+          if (!defaultOption.eventBus.hasOwnProperty(key)) {
+            defaultOption.eventBus[key] = option.on[key];
+          } else {
+            throw new Error(`方法：${key}已经存在`)
+          }
+        }
+      }
+
+      this.init()
+
+    } else {
+      throw new Error("缺少必填参数el或el为空");
+    }
+  }
+
+  Swiper.prototype = {
+    init() {
+      this.createdDot();
+      defaultOption.initialSlide == null ? '' : this.initialSlide();
+      this.bindNextEl();
+      this.bindPrevEl();
+      defaultOption.autoPlay ? this.AutoPlay() : '';
+    },
+
+    /**
+     * 默认显示第几张轮播图
+     */
+    initialSlide() {
+      var offset = -defaultOption.initialSlide * defaultOption.containerWidth();
+      this.changeX(offset);
+      this.DotChange(defaultOption.initialSlide)
+    },
+
+    /**
+     * 下一页
+     */
+    bindNextEl() {
+      if ($(defaultOption.navigation.nextEl) != null) {
+        $(defaultOption.navigation.nextEl).onclick = () => {
+          this.loopChange("next")
+        }
+      }
+    },
+
+    /**
+     * 上一页
+     */
+    bindPrevEl() {
+      if ($(defaultOption.navigation.prevEl) != null) {
+        $(defaultOption.navigation.prevEl).onclick = () => {
+          this.loopChange("prev")
+        }
+      }
+    },
+
+    /**
+     * 计算移动距离，和越界处理
+     * @param offset
+     */
+    animation(offset) {
+      var oldOffset = parseInt($(".swiper-wrapper").style.transform.substring(11));
+      var newOffset = oldOffset + offset;
+
+      if (newOffset < -1040) {
+        newOffset = 0
+      };
+
+      if (newOffset > 0) {
+        newOffset = -1040
+      };
+
+
+      this.DotChange(
+        Math.abs(newOffset / defaultOption.containerWidth())
+      );
+
+
+      this.changeX(newOffset)
+    },
+
+    /**
+     * 创建小圆点
+     */
+    createdDot() {
+      // 如果没有小圆点的父级dom元素，那么不创建小圆点
+      if ($(defaultOption.pagination.el) != null) {
+        var Slide = $(".swiper-wrapper .swiper-slide");
+        Slide.forEach((v, i) => {
+          $(defaultOption.pagination.el).innerHTML +=
+            `<div class="swiper-pagination-dot ${i == 0 ? 'dot-active' : ''}"></div>`
+        });
+
+        // 绑定事件
+        var children = $(`${defaultOption.pagination.el} swiper-pagination-dot`)
+        children.forEach((v, i) => {
+          v.onclick = () => {
+            this.DotChange(i)
+          }
+        });
+
+        // var children = $(defaultOption.pagination.el).children
+        // for (var i = 0; i < children.length; i++) {
+        //
+        //   ((index)=>{
+        //
+        //     children[index].onclick = () => {
+        //       this.DotChange(index)
+        //     }
+        //
+        //   })(i);
+        //
+        // }
+      }
+    },
+
+    /**
+     * 小圆点切换
+     * @param index 下标
+     */
+    DotChange(index) {
+      if ($(defaultOption.pagination.el) != null) {
+        // 保存最新的下标
+        defaultOption.initialSlide = index;
+
+        // 调用事件，回传最新下标给用户的方法
+        defaultOption.eventBus.slideChange
+          && defaultOption.eventBus.slideChange(defaultOption.initialSlide)
+
+        // 改变小圆点的激活样式
+        var children = $(defaultOption.pagination.el).children;
+        for (var i = 0; i < children.length; i++) {
+          children[i].classList.remove("dot-active")
+        }
+        children[index].classList.add("dot-active")
+        // 移动轮播图
+        this.changeX(index * -defaultOption.containerWidth())
+      }
+    },
+
+    /**
+     * 让图片动起来
+     * @param x
+     */
+    changeX(x) {
+      var style = null;
+      // 通过变量 statusCallChangeX 判断方法是否是第一次执行，如果是第一次执行
+      // 那么不需要 transition-duration 动画时间
+      // 主要是解决：initialSlide 的bug
+      if (defaultOption.statusCallChangeX) {
+        style = `transform: translateX(${x}px);`;
+      } else {
+        style =
+          `
+            transition-duration: ${defaultOption.speed / 1000}s;
+            transform: translateX(${x}px);
+          `
+      }
+
+      defaultOption.statusCallChangeX = false;
+      $(".swiper-wrapper").style = style
+
+    },
+
+    /**
+     * 自动播放
+     * @constructor
+     */
+    AutoPlay() {
+      timer = setInterval(
+        () => {
+          // 如果开启了循环播放
+          if (defaultOption.loop) {
+            // 向下一页播放
+            this.loopChange("next")
+          } else {
+            // 如果不是最后一张
+            if (defaultOption.initialSlide != $(".swiper-wrapper").children.length - 1) {
+              // 因为这行代码会被重复执行，所以需要做一个变量来决定轮播图移动的方向
+              // 进而判断向什么方向保持继续移动
+              if (defaultOption.reverse) {
+                this.loopChange("next")
+              } else {
+                this.loopChange("prev")
+              }
+            } else {
+              this.loopChange("prev")
+              defaultOption.reverse = false
+            }
+
+            // 判断是否是第一张，如果是第一张，那么改变方向(下一页)
+            if (defaultOption.initialSlide == 0) {
+              defaultOption.reverse = true
+            }
+
+          }
+        },
+        defaultOption.autoTime);
+
+      $(defaultOption.el).onmousemove = () => clearInterval(timer);
+      $(defaultOption.el).onmouseout = () => this.AutoPlay();
+    },
+
+    /**
+     * 循环切换的公共代码封装
+     */
+    loopChange(type) {
+      if (defaultOption.loop) {
+        this.animation(
+          type == 'next' ? -defaultOption.containerWidth() : defaultOption.containerWidth()
+        )
+      } else {
+        if (
+          defaultOption.initialSlide
+          !=
+          (type == "next"
+            ? $(".swiper-wrapper").children.length - 1
+            : 0)
+        ) {
+          this.animation(type == 'next' ? -defaultOption.containerWidth() : defaultOption.containerWidth())
+        }
+      }
+    },
+
+    // ----------- 对外暴露的方法 ----------
+    /**
+     * 事件控制中心
+     * @param methodsName
+     * @param callBack
+     */
+    on(methodsName, callBack) {
+      if (!defaultOption.eventBus.hasOwnProperty(methodsName)) {
+        defaultOption.eventBus[methodsName] = callBack;
+
+        switch (methodsName) {
+          case 'slideChange':
+            defaultOption.eventBus[methodsName](defaultOption.initialSlide)
+            break;
+        }
+
+      } else {
+        throw new Error(`方法：${methodsName}已经存在`)
+      }
+    },
+
+    /**
+     * 切换轮播图
+     * @param index
+     */
+    slideTo(index = 0) {
+      this.changeX(-index * defaultOption.containerWidth());
+      this.DotChange(index)
+    }
+  }
+
+
+  function $(className) {
+    var classNameArr = className.split(" ");
+
+    if (classNameArr.length == 1) {
+      return document.querySelector(className)
+    } else {
+      // 多类名的时候，获取最后一个类名的上一个类名
+      var fatherClassName = classNameArr[classNameArr.length - 2];
+      // 获取最后一个类名
+      var lastClassName = classNameArr[classNameArr.length - 1];
+
+      var NewArr = []
+      // 获取父级有多少个子元素
+      var childrenList = document.querySelector(fatherClassName).children;
+      // 返回你要的子元素
+      for (let i = 0; i < childrenList.length; i++) {
+        if (childrenList[i].className.indexOf(lastClassName.replace(".", "")) != -1) {
+          NewArr.push(childrenList[i])
+        }
+      }
+
+      return NewArr.length == 1 ? NewArr[0] : NewArr
+      // // 如果只有一个，返回html
+      // if (NewArr.length == 1) {
+      //   return NewArr[0]
+      // // 多个直接返回数组
+      // } else {
+      //   return NewArr
+      // }
+    }
+
+  }
+
+  window.Swiper = Swiper
+
+})()
+
+// 自执行函数