first commit

历届学生/韩想/项目开发/课程项目/轮播图/js/swiper.js

@@ -0,0 +1,245 @@
+// 自执行（匿名）函数
+(function () {
+    // 默认参数
+    var defaultOption = {
+        time: 3,
+        imgClick: function () {
+
+        }
+    };
+
+    var DomEle = {
+        main: null,
+        Dot: null,
+        Pic: null,
+        Action: null,
+        LeftAction: null,
+        RightAction: null,
+        ImgWidth: 0,
+        AutoPlay: null,
+    };
+
+    function swiper (Option) {
+        if (Option.hasOwnProperty("el") && document.querySelector(Option.el) !== null) {
+            if (Option.hasOwnProperty("data") && Option.data.length !== 0) {
+                // 可选参数的合并
+                Object.assign(defaultOption, Option)
+                this.init()
+
+            } else {
+                console.error(`data未传，或是data数组为空，请检查`)
+            }
+        } else {
+            console.error(`el未传，或是类名${Option.el}不存在，请检查`)
+        }
+    }
+
+    swiper.prototype = {
+        init: function () {
+            console.log("检查工作已经结束，开始绘制轮播图")
+            // 创建dom，追加到网页上
+            this.CreatedMain();
+            this.CreatedPic();
+            this.CreatedYd();
+
+            document.querySelector(defaultOption.el).appendChild(DomEle.main);
+
+            if (defaultOption.isAction) {
+                this.CreatedAction()
+                this.BindRightClick();
+                this.BindLeftClick();
+            }
+            this.BindClickYdLi();
+            this.BindOnmouseover();
+            this.BindOnmouseout();
+            this.Auto();
+        },
+
+        /**
+         * 绑定左边按钮的点击事件
+         * @constructor
+         */
+        BindLeftClick() {
+            DomEle.LeftAction.onclick = () => this.change(DomEle.ImgWidth)
+        },
+
+        /**
+         * 绑定右边按钮的点击事件
+         * @constructor
+         */
+        BindRightClick: function () {
+            // var dd = this;
+            DomEle.RightAction.onclick = () => this.change(-DomEle.ImgWidth)
+        },
+
+        BindClickYdLi() {
+            var self = this;
+            DomEle.Dot.childNodes.forEach(function (v,ix){
+                v.onclick = function () {
+                    self.ClearActive()
+                    this.className = "active"
+                    var left = ix * -DomEle.ImgWidth;
+                    DomEle.Pic.style.left = `${left}px`
+                }
+            })
+        },
+
+        /**
+         * 鼠标悬停
+         * @constructor
+         */
+        BindOnmouseover() {
+            DomEle.main.onmouseover = function () {
+                clearInterval(DomEle.AutoPlay)
+            }
+        },
+
+        /**
+         *
+         * @constructor
+         */
+        BindOnmouseout() {
+            DomEle.main.onmouseout = () => {
+                this.Auto()
+            }
+        },
+
+        Auto() {
+            DomEle.AutoPlay = setInterval(() => {
+                this.change(-DomEle.ImgWidth)
+            }, defaultOption.time * 1000);
+        },
+
+        /**
+         * 主要动画过渡
+         * @param off number 传入的偏移距离
+         */
+        change: function (off) {
+            var oldLeft = parseInt(DomEle.Pic.style.left);
+            var newLeft = oldLeft + (off);
+            var index = parseInt(`${(newLeft / -DomEle.ImgWidth)}`);
+
+            if (newLeft > 0) {
+                newLeft = -( (defaultOption.data.length-1) * DomEle.ImgWidth )
+                index = 2
+            }
+
+            if (newLeft < -( (defaultOption.data.length-1) * DomEle.ImgWidth )) {
+                newLeft = 0;
+                index = 0
+            }
+
+            this.ClearActive()
+            DomEle.Dot.childNodes[index].className = "active";
+            DomEle.Pic.style.left = `${newLeft}px`
+        },
+
+        ClearActive() {
+            DomEle.Dot.childNodes.forEach(function (a,b){
+                a.className = ""
+            });
+        },
+
+        /**
+         * 创建最外层父节点main
+         * @constructor
+         */
+        CreatedMain: function () {
+            DomEle.main = document.createElement("div")
+            DomEle.main.className = "main";
+        },
+
+        /**
+         * 图片父节点
+         * @constructor
+         */
+        CreatedPic: function () {
+            DomEle.Pic = document.createElement("ul");
+            DomEle.Pic.className = "pic";
+            DomEle.Pic.style.left = "0px"
+            defaultOption.data.forEach((val,index)=> {
+                DomEle.Pic.innerHTML += `
+                    <li>
+                      ${
+                          val.hasOwnProperty("href")
+                          ? `<a href="${val.href}" target="_blank"><img src="${val.img}"></a>`
+                          : `<img src="${val.img}" >`
+                        }
+                    </li>
+                `
+            });
+            if (defaultOption.data[0].hasOwnProperty("href")) {
+                DomEle.ImgWidth = DomEle.Pic.children[0].children[0].children[0].width;
+            } else {
+                DomEle.ImgWidth = DomEle.Pic.children[0].children[0].width;
+                DomEle.Pic.querySelectorAll("li").forEach((val,index)=> {
+                    val.onclick = function () {
+                        defaultOption.imgClick(val,index)
+                    }
+                })
+            }
+
+            DomEle.main.appendChild(DomEle.Pic)
+        },
+
+        /**
+         * 左右翻页按钮父节点
+         * @constructor
+         */
+        CreatedAction: function () {
+            DomEle.Action = document.createElement("div");
+            DomEle.LeftAction = document.createElement("div");
+            DomEle.RightAction = document.createElement("div");
+
+            DomEle.Action.className = "action";
+            DomEle.LeftAction.className = "left";
+            DomEle.RightAction.className = "right";
+
+            DomEle.LeftAction.innerText = "<";
+            DomEle.RightAction.innerText = ">";
+
+
+            DomEle.Action.appendChild(DomEle.LeftAction)
+            DomEle.Action.appendChild(DomEle.RightAction)
+
+            DomEle.main.appendChild(DomEle.Action)
+
+        },
+
+        /**
+         * 小圆点的父节点
+         * @constructor
+         */
+        CreatedYd: function () {
+            DomEle.Dot = document.createElement("ul");
+            DomEle.Dot.className = "yd";
+
+            defaultOption.data.forEach((val,index)=> {
+                DomEle.Dot.innerHTML += `<li class="${ index == 0 ? 'active': '' }"></li>`
+            });
+            DomEle.main.appendChild(DomEle.Dot)
+        },
+    }
+
+
+    window.Swiper = swiper
+})()
+
+// function data() {
+//     var name = "ddd"
+//     console.log(name)
+//     console.log(this.name)
+// }
+//
+// data.prototype.name = "dddd"
+//
+// new data()
+
+// class data {
+//     constructor() {
+//
+//     }
+//
+// }
+//
+// new data()