first commit

历届学生/18课程/class18_2/项目/练习项目/王一鸣/轮播/js/loop.js

@@ -0,0 +1,313 @@
+(function() {
+
+    
+
+   
+/**
+ * 模拟构建一个类 设置默认参数
+ */
+    var defaultOption = {
+        el:'.swiper-container', //默认轮播图容器类名
+        timer:null,
+        statusCallChangeX:true,//解决设置默认图片后第一张图片仍然有过度动画的bug
+        loop:false,//是否开启循环播放
+        autoPlay:false,//是否开启自动播放
+        autoTime:300,//自动播放速度控制
+        speed:300,//图片切换速度
+        reverse:true,//解决当不开启循环时 图片只在最后一张和倒数第二张之间来回轮播的bug
+        defaultpicture:0,//默认第几张图片
+        navigation:{   //上一页和下一页按钮
+            nextbtn:'.swiper-button-next',
+            prevbtn:'.swiper-button-prev',
+        },
+        dotcontrol:{    //小圆点 容器（父元素）类名
+            el:'.swiper-pagination',
+        },
+        eventbus:{}
+        
+    }
+    function Slide(user_input){
+        if(user_input.hasOwnProperty("el") && user_input.el.length != 0){
+            defaultOption.el = user_input.el;
+            defaultOption.loop = user_input.loop || defaultOption.loop;
+            defaultOption.autoPlay = user_input.autoPlay || defaultOption.autoPlay;
+            defaultOption.autoTime = user_input.autoTime || defaultOption.autoTime;
+            defaultOption.speed = user_input.speed ||defaultOption.speed;
+            defaultOption.defaultpicture = user_input.defaultpicture || defaultOption.defaultpicture;
+
+            if(user_input.hasOwnProperty("navigation")){
+                if(user_input.navigation.hasOwnProperty("nextbtn")){
+                    defaultOption.navigation.nextbtn = user_input.navigation.nextbtn;
+                }
+                if(user_input.navigation.hasOwnProperty("prevbtn")){
+                    defaultOption.navigation.prevbtn = user_input.navigation.prevbtn;
+                }
+            }
+
+            if(user_input.hasOwnProperty("dotcontrol")){
+                defaultOption.dotcontrol.el = user_input.dotcontrol.el;
+            }
+            /**
+             * 不是很清楚  on  的作用（用法）
+             */
+            if(user_input.hasOwnProperty("on")){
+                for (const key in user_input.on) {
+                    if(!defaultOption.eventbus.hasOwnProperty(key)){
+                        defaultOption.eventbus[key] = user_input.on[key];
+                    }else{
+                        throw new Error(`${key}方法已存在`);
+                    }
+                }
+            }
+
+            this.init();
+            
+        }else{
+            throw new Error(`缺少必填参数${el},或参数${el}为空！`)
+        }
+
+
+        
+    }
+     //定义全局变量 获取到轮播区域总容器宽度
+    var  loopwidth =parseInt( $(defaultOption.el).clientWidth);
+    //prototype 属性使您有能力向对象添加属性和方法。
+    Slide.prototype = {
+        
+        
+        init(){
+            this.creatDot();
+            this.defaultpicture();
+            this.Nextbtn();
+            this.Prevbtn();
+            defaultOption.autoPlay ? this.AutoPlay() : "";
+        },
+        
+        defaultpicture(){
+            var offset = -defaultOption.defaultpicture * loopwidth;
+            this.changx(offset);
+            this.Dotchange(defaultOption.defaultpicture)
+        },
+
+         //为上一页、下一页  俩个按钮绑定onclick事件
+        Nextbtn(){
+            if($(defaultOption.navigation.nextbtn) != null){
+                $(defaultOption.navigation.nextbtn).onclick = () =>{
+                    this.looppublic("next")
+                }
+            };
+        },
+        Prevbtn(){
+            if($(defaultOption.navigation.prevbtn) != null){
+                $(defaultOption.navigation.prevbtn).onclick = () =>{
+                    this.looppublic("prev")
+                }
+            };
+        },
+
+        animation(offset){
+            var oldoffset = parseInt($(".swiper-wrapper").style.transform.match(/[\-]+\d+|\d+/));
+            //正则匹配正、负数
+            // console.log(parseInt(oldoffset.match(/[\-]+\d+|\d+/)));   
+            var newOffset = oldoffset + offset;
+           
+            if(newOffset < -(loopwidth * $(".swiper-wrapper .swiper-slide").length)){
+                newOffset = 0;
+            };
+            if(newOffset > 0){
+                newOffset = -(loopwidth * $(".swiper-wrapper .swiper-slide").length);
+            };
+
+            this.Dotchange(
+                Math.abs(newOffset / loopwidth)
+            );
+            this.changx(newOffset);
+        },
+        changx(x){
+            var style = " ";
+            if(defaultOption.statusCallChangeX){
+                style = `transform: translateX(${x});`
+            }else{
+                style =`
+                transform: translateX(${x});
+                transition-duration: ${defaultOption.speed/1000}s;
+                `
+            }
+            defaultOption.statusCallChangeX = false;
+            $(".swiper-wrapper").style = style;
+
+        },
+       
+
+        AutoPlay(){
+            timer = setInterval(
+                () => {//defaultOption.loop = true 开启了循环播放
+                    if(defaultOption.loop){
+                        this.looppublic("next");
+                    }else{
+                        if(defaultOption.defaultpicture != $(".swiper-wrapper .swiper-slide").length -1){
+                            if(defaultOption.reverse){
+                                this.looppublic("next")
+                            }else{
+                                this.looppublic("prev")
+                            }
+                        }else{
+                            this.looppublic("prev");
+                            defaultOption.reverse = false;
+                        }
+                    
+                        if(defaultOption.defaultpicture == 0){
+                            defaultOption.reverse = true;
+                        }
+                    }
+                },defaultOption.autoTime);
+
+                $(defaultOption.el).onmousemove = ()=> clearInterval(timer);
+                $(defaultOption.el).onmouseout = ()=> this.AutoPlay();
+        },
+        
+        creatDot(){
+            if($(defaultOption.dotcontrol.el) != null){
+                var slides = $(".swiper-wrapper .swiper-slide");
+                slides.forEach((v, i) => {
+                    $(defaultOption.dotcontrol.el).innerHTML +=`
+                    <div class="swiper-pagination-dot ${i == 0 ? 'dot-active': ''}"></div>
+                    `
+                })
+                var dots = $(`${defaultOption.dotcontrol.el} .swiper-pagination-dot`);
+                
+                dots.forEach((v,i) =>{
+                    v.onclick = () =>{
+
+                    this.Dotchange(i)
+                        
+                    }
+                    
+                    
+                });
+            }
+        },
+        Dotchange(index){
+            defaultOption.defaultpicture = index;
+            
+            defaultOption.eventbus.slidChange &&
+            defaultOption.eventbus.slidChange(defaultOption.defaultpicture);
+
+            var dots = $(defaultOption.dotcontrol.el).children;
+            //console.log(dots);
+            for(var a = 0; a < dots.length; a++){
+               dots[a].classList.remove("dot-active")
+               
+            }
+            //console.log(index);
+            // dots[index].className = "swiper-pagination-dot dot-active"
+            this.changx(index * -loopwidth);
+        },
+
+
+        looppublic(type){
+            //表示开启了循环播放
+            if(defaultOption.loop){
+                this.animation(
+                    type == "next" ? -loopwidth : loopwidth
+                )
+            }else{//不开启循环  需要控制 当图片轮播人到最后一张时 往回播放到第一张 再由第一张到最后一张
+                if(defaultOption.defaultpicture != (type == 'next' ? $(".swiper-wrapper .swiper-slide").length -1 : 0))
+                {
+                    this.animation(
+                        type == "next" ? -loopwidth : loopwidth
+                    )
+                }
+            }
+        },
+
+        on(metName,Back){
+            if(!defaultOption.eventbus.hasOwnProperty(metName)){
+                defaultOption.eventbus[metName] = Back;
+
+                switch(metName){
+                    case "slideChange":
+                        defaultOption.eventbus[metName](defaultOption.defaultpicture)
+                        break;
+                }
+            }else{
+                throw new Error(`$[metName]方法已存在`)
+            }
+        },
+
+        SlideTo(index = 0){
+            this.changx(-index * loopwidth);
+            this.Dotchange(index)
+        }
+
+    }
+
+
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+     * 封装$()方法
+     */
+    function $(ClassName) {
+        var class_list = ClassName.split(" ");
+        if (class_list.length == 1){
+             return document.querySelector(ClassName);
+        
+        }else{
+            var f_classname = class_list[class_list.length -2];
+            var l_classname = class_list[class_list.length -1];
+            var childrenlist = document.querySelector(f_classname).children;
+            var arr = [];
+            
+            for(var i=0; i<childrenlist.length; i++){
+                if(childrenlist[i].className.search(l_classname.replace(".", "")) != -1){
+                   arr.push(l_classname)
+                }
+            }
+            if(arr.length == 1){
+                return arr[0];
+            }else{
+                return arr;
+            }
+        }
+        
+    }
+  window.Slide = Slide
+})()