first commit

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

@@ -0,0 +1,74 @@
+.main {
+    width: 520px;
+    height: 280px;
+    margin: 40px auto;
+}
+@font-face {font-family: "iconfont";
+    src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851'); /* IE9 */
+    src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+    url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.woff?t=1608534888851') format('woff'),
+    url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.ttf?t=1608534888851') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+    url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.svg?t=1608534888851#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-bangzhujinru:before {
+    content: "\e64e";
+}
+
+.icon-back:before {
+    content: "\e608";
+}
+
+.swiper-container {
+    height: 100%;
+    overflow-x: hidden;
+    position: relative;
+}
+.swiper-wrapper {
+    display: flex;
+}
+.swiper-pagination {
+    position: absolute;
+    display: flex;
+    z-index: 99;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.swiper-pagination-dot {
+    width: 15px;
+    height: 15px;
+    background: #fff;
+    border-radius: 100%;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.dot-active {
+    background: red;
+}
+.swiper-button-prev {
+    left: 10px;
+}
+.swiper-button-next {
+    right: 10px;
+}
+.swiper-button-prev,
+.swiper-button-next{
+    cursor: pointer;
+    font-size: 25px;
+    color: white;
+    padding: 5px 2px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0,0,0,.3);
+}

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

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link href="./css/swiper.css" rel="stylesheet"/>
+    <style>
+        body,h1,h3,h2,h4,h5,h6,ul,li{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            
+        }
+    </style>
+</head>
+<body>
+
+
+<div class="main">
+
+
+    <div class="swiper-container">
+
+        <div class="swiper-wrapper" style="transform: translateX(0px);">
+            <div class="swiper-slide">
+                <img src="https://gw.alicdn.com/imgextra/i3/1725301/O1CN01EFbPcV1p1uBtr9RQd_!!1725301-0-lubanu.jpg" alt="">
+            </div>
+            <div class="swiper-slide">
+                <img src="https://a1.alicdn.com/assets/p4p-fallback/mm_12852562_1778064_13672849.jpg" alt="">
+            </div>
+            <div class="swiper-slide">
+                <img src="https://gw.alicdn.com/imgextra/i3/1725301/O1CN01124Tg31p1uBk2wbua_!!1725301-0-lubanu.jpg" alt="">
+            </div>
+        </div>
+
+        <!--小圆点-->
+        <div class="swiper-pagination"></div>
+
+<!--        &lt;!&ndash;上一页，下一页按钮&ndash;&gt;-->
+<!--        <div class="iconfont icon-back swiper-button-prev"></div>-->
+<!--        <div class="iconfont icon-bangzhujinru swiper-button-next"></div>-->
+
+    </div>
+
+</div>
+
+
+</body>
+<script src="./js/loop.js"></script>
+<script>
+
+  var sl = new Slide({
+    el: '.swiper-container',
+    autoPlay: true,
+    autoTime: 2000,
+    loop: false,
+    on: {
+      slideChange: function(index){
+        console.log("1:",index)
+      },
+    },
+  });
+
+  // a.on("slideChange", function (index) {
+  //   console.log("2:",index)
+  // });
+
+     sl.slideTo(0)
+  //
+  // a.on("test", function (index) {
+  //   console.log(index)
+  // })
+</script>
+</html>

历届学生/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
+})()