first commit

项目合集/轮播/插件版/.pydio

@@ -0,0 +1 @@
+df5e0a47-e8c6-401a-9713-02465be74879

项目合集/轮播/插件版/css/.pydio

@@ -0,0 +1 @@
+15d21c1e-8ee3-4c83-b364-62adcfdfd5b1

项目合集/轮播/插件版/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,d09GMgABAAAAAAa0AAsAAAAADHQAAAZkAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqKRIhLATYCJAMoCxYABCAFhG0HgREbmgrIHpIkSMABBxIoIGJnOB7o12jvy66fajqHqBrVunn00CDhKUtoDJ3sJdz/T6f9ffPCmbDidOFCXJVKkwl80qRaOfnfyVIMvph+AAR5u59UpChEMVGLbCMWxv9/zNelNVheX4DsTKnqvZ2TRVH1ZqPxBAcUv9sqwL4VAX4bsfmHqwCz0XVcTkBr0TToWMWMRuDJeLuAcFejkgEv45Ib+EFtLysOzRDeAFsdVxEPAbwO/j78h5TggahIwFc6fb1cAUW/YPQ8Xvj/Qp1pISzaXgCjo0jYCmTC58rQWzjKboW1i7uz3AZGSWDxF/j5/jR/nn+Wf4n/yOj5//+nqJJH4kAwKspB/+aBWqkSNKKskAglwNZbzGe5hl/ggJpfDiUQHw4VUBocAlAedP3QLDhEoCVwyEBHEFB4OvRAniJ6e8g4MA3CJ4A4D8w6Jp1EhYSiYC1JK4LJHBQWwxcQlbX75InS0MCIQCGas9Vddts7BhlTSB7eS4u0XmTfv+jARPGufRv3mtEaJ7UIUWtcoSAOlGtNsGO1C1m7BFOUK5RYu3ecaPf+CDz/bGoOo6hTKdGw5PTzGPaWF5nUEV+m8JQnnjr1LJq18emIcy+wXu2jpI4DiL1ofwhpXx1y/DIpsF9McjpJw84e1rFv4V6F19vs87V4PE1ud/tNN73NU37HN3a7dw5LhMVIxJKyKTREQfuAhLeF0NvzqXL/efvZSYq9W4Nd+9IpQr+Kwus3UJRjXRhBdb0bps4cCF2zfUojSaw9OI7EO65XkDevxhHk7sMIH8TDkKFrQlUHHJMZV3Cw3UmaXBv32kOUqxeFqtY49m0MUsxpvuFDB8V3uxs3cfhmN7kcoWvWWw7yDAvdeXanM+iim/R65zjObdo4SXOJvXdv3p9yuaD5srdg/+YtF6iWOX2/Hx7k+Xy869TEC6MtIb3nuaQRFf74hF1Z01vrpNjAhO+u7Y2xMhw8182/HPNpypiHYYcmH/ro8tVHvPc/PA50IcBsvV7nV/rD6673IglAPESHC4vMM/D7SQ+T3sczzEVCGEnS+fb5jpZTN05dB9iT6TJzJQ/zK81borMqZWMWZVYKt5gr+ZhXmXF9xVVCjEVYWCb0Ligmrp6m/t6NYvljuAmpk/+iBCqRNEqk4ntqkV6PatXQuCNJSX5tVRWb7eDa4DSQ9OMbmDeg8XyOsKG6Me36j415QwsWln3SdarxVBndDxTEraVvBrxIfzFmyZtPanWTH0izMzkls2W7qkld+JJwHVm9S5Z+cE5mtvThJF3tk/Flw4PU11uVfPaWoiVFR9h8ZuvfUYPDCKOq8elL34xLkS55s2x89fB+4EfuI7xv7Ht92kdjH8k73hu7Hz8szYeMO7Wt9djUOaV487PnW1wzHmpwq80vnm3EZcPxWe3tayPXasNPNRBLDh9ajJfgQ4fM++bHGzYgROOzhviCxcThw5DxlkWXn7yUUd+x7kjljLEZ5jg851BLx6HG1mq873pw1DcAu5ePdXz068MsUZM6uiWbH/pgRq0Gdb16Lqck6B5/vb0E2q5BqbIr7SWI1BSHMqWFPUsAPPgGwObIkI4Hwh3/TTWrZzqI4///b3NBxnjhIn3ih1iK1S+NEF8DkL4Qy5HvaSOe8zvbzPeIC5/3iPN+5VF/vcRPjl5tjWynRi2i1v+qHBk1UP4zLY3sbvOc4GiUxKLhx5u7hs3Hz6GVGX5NsVEfbBtPqOsJahMJRJUFSGpL1MzcCoXONijVDkJri8qjO2MssJD5wIZlBoJhRyAa9BWSYY+omfk+FCZ9C6XhwNC6GAJP2VkJDVlqYWRWRkH3DdMaucmotL1WMmysZ1Q2vcySNgaCZsbSr0nQyQlJ+UIlY2Qs29ijf0CVYrUqaaXFZKArzNUYvd5Emy0mLSO3JqitVnNOYqKy6okS5CYDkI6yYMhYMRRofYbRNORMjJTefCuy8Pv1GCo2ejKWBuJCsRnDop9mcVqyBEkKaqXNqCIeS3u/ASoprBRQop1+CxMDWgUFGHrJmtDM1RtpMeSsEqh7pM1yJNI0pdaWsH9seLSNf9YJfPc2EAgjFmIjDuIiHuIjElFQP1HLjCqtRiboCzYaUdu0GqPFxh3SVJyWpzLZBm1yNcNSmwwMq08m1wUPaYywGm+drlu1XG2TGeN5rTXuGq5CY1QNMhoAAAAA') 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);
+}

项目合集/轮播/插件版/js/.pydio

@@ -0,0 +1 @@
+1e080abc-7862-40e8-9102-cd835057b38a

项目合集/轮播/插件版/js/swiper.js

@@ -0,0 +1,338 @@
+(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;
+
+      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();
+      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) {
+      // 保存最新的下标
+      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
+
+})()
+
+// 自执行函数

项目合集/轮播/插件版/swiper.html

@@ -0,0 +1,73 @@
+<!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/swiper.js"></script>
+<script>
+  var a = new Swiper({
+    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)
+//   });
+
+  a.slideTo(0)
+  //
+  // a.on("test", function (index) {
+  //   console.log(index)
+  // })
+
+</script>
+</html>

项目合集/轮播/插件版/笔记.txt

@@ -0,0 +1,49 @@
+实现的功能：
+
+自定义参数：
+【完成】1：loop: false // 循环模式选项
+【完成】2：自动播放
+
+   autoPlay: true // false
+   autoTime: 3(默认) 用户可以自定义
+
+【完成】3：是否需要前进后退按钮
+	如果需要
+  1：写上html
+  2：
+	  // 如果需要前进后退按钮
+	  navigation: {
+	    nextEl: '.swiper-button-next',
+	    prevEl: '.swiper-button-prev',
+	  },
+
+【完成】4：是否需要小圆点
+  如果需要
+  1：写上html
+  2：
+    pagination: {
+      el: '.swiper-pagination',
+    },
+
+【完成】5：initialSlide: 0(默认) 设置显示第几张图
+【完成】6：speed: 300(默认) 设置图片切换的速度
+7：direction: horizontal(默认) 播放的方向 vertical
+
+功能（方法）：
+
+1：slideChange() 轮播图切换的时候，调用这个方法，返回下标
+new Swiper('.swiper-container',{
+  on:{
+    slideChange: function(){
+      alert('改变了，activeIndex为'+this.activeIndex);
+    },
+  },
+})
+
+mySwiper.on('slideChange', function () {
+  //...
+});
+
+2：slideTo(index)  传入参数，切换轮播图
+
+3: stop() start() 停止，开始自动播放