first commit

项目合集/轮播/功能版/.pydio

@@ -0,0 +1 @@
+7140c79f-3c1d-4885-9577-849c7f60ea80

项目合集/轮播/功能版/css/.pydio

@@ -0,0 +1 @@
+3e056d87-3fc4-4c55-85ad-8cea68782efb

项目合集/轮播/功能版/css/swiper.css

@@ -0,0 +1,75 @@
+.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;
+    transition-duration: 0.3s;
+}
+.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 @@
+dfe861b7-e13e-4eab-9fd1-bb86f95c4c73

项目合集/轮播/功能版/js/swiper.js

@@ -0,0 +1,110 @@
+var timer;
+
+// 下一页
+$(".swiper-button-next").onclick = function () {
+  animation(-520)
+}
+
+// 上一页
+$(".swiper-button-prev").onclick = function () {
+  animation(520)
+}
+
+
+// 计算移动距离，和越界处理
+function 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
+  };
+
+  DotChange(Math.abs(newOffset / 520))
+  changeX(newOffset)
+
+}
+
+
+// 绑定小圆点的点击事件
+var dot = $(".swiper-pagination .swiper-pagination-dot")
+dot.forEach(function (v,i){
+  v.onclick = function () {
+    DotChange(i)
+  }
+})
+
+
+// 切换小圆点
+function DotChange(i) {
+  dot.forEach(function (val,index){
+    val.classList.remove("dot-active")
+  })
+  dot[i].classList.add("dot-active")
+  changeX(i*-520)
+}
+
+// 让图片动起来
+function changeX(x) {
+  $(".swiper-wrapper").style = `
+    transform: translateX(${x}px);
+  `
+}
+
+// 鼠标悬浮，清除定时器
+$(".swiper-container").onmousemove = function () {
+  clearInterval(timer)
+}
+
+// 鼠标离开，自动播放
+$(".swiper-container").onmouseout = function () {
+  AutoPlay()
+}
+
+function AutoPlay() {
+  // 定时器，自动播放
+  timer = setInterval(function (){
+    $(".swiper-button-next").onclick()
+  }, 1000)
+}
+
+AutoPlay()
+
+
+// 模仿框架jq实现 $ 功能
+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
+    // }
+  }
+
+}

项目合集/轮播/功能版/swiper.html

@@ -0,0 +1,53 @@
+<!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 class="swiper-pagination-dot dot-active"></div>
+            <div class="swiper-pagination-dot"></div>
+            <div class="swiper-pagination-dot"></div>
+        </div>
+
+        <!--上一页，下一页按钮-->
+        <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>
+</html>