first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/项目合集/轮播图/插件版/.pydio
+++ b/项目合集/轮播图/插件版/.pydio
@@ -0,0 +1 @@
+05f21417-39e4-4711-a746-003a1165a43c
--- a/项目合集/轮播图/插件版/swiper.css
+++ b/项目合集/轮播图/插件版/swiper.css
@@ -0,0 +1,53 @@
+body,ul,li,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.swiper-container {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+.dot {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+}
+.dot li {
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    background: #fff;
+    margin-right: 10px;
+}
+.dot .active {
+    background: red;
+}
+.swiper-wrapper {
+    position: relative;
+    display: flex;
+}
+.swiper_item {
+    flex-shrink: 0;
+    width: 100%;
+}
+.swiper-wrapper img {
+    width: 100%;
+}
+
+.action {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.but {
+    color: #fff;
+    font-size: 40px;
+}
--- a/项目合集/轮播图/插件版/swiper.html
+++ b/项目合集/轮播图/插件版/swiper.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>轮播图</title>
+  <link rel="stylesheet" href="./swiper.css">
+</head>
+<body>
+
+
+
+<div class="swiper-container">
+
+  <div class="swiper-wrapper">
+    <div class="swiper_item">
+      <img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt="">
+    </div>
+    <div class="swiper_item">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
+    </div>
+    <div class="swiper_item">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
+    </div>
+  </div>
+
+  <div class="action">
+    <div class="but prev"> &lt; </div>
+    <div class="but next"> &gt; </div>
+  </div>
+
+  <ul class="dot"></ul>
+
+</div>
+
+<button onclick="test()">点我</button>
+
+
+</body>
+<script src="swiper.js"></script>
+<script>
+  var a = new swiper('.swiper-container', {
+    autoPlay: false,
+    autoTime: 3000,
+    navigation: {
+      nextEl: '.next',
+      prevEl: '.prev',
+    },
+    pagination: {
+      el: ".dot",
+    },
+  })
+
+  a.on('slideChange', function (index) {
+    console.log(index)
+  })
+
+  function test () {
+    a.slideTo(2)
+  }
+
+</script>
+</html>
--- a/项目合集/轮播图/插件版/swiper.js
+++ b/项目合集/轮播图/插件版/swiper.js
@@ -0,0 +1,183 @@
+(() => {
+  class Swiper {
+    // 插件默认参数
+    defaultOption = {
+      onEvent: {},
+      timer: null,
+      el: '',
+      loop: false,
+      autoPlay: false,
+      autoTime: 1000,
+      initialSlide: 0,
+      speed: 300,
+      // 左右按钮
+      navigation: {
+        nextEl: null,
+        prevEl: null,
+      },
+      pagination: {
+        el: null,
+      },
+      length: () => {
+       return this._(".swiper_item").length
+      },
+      width: () => {
+       return document.querySelector(this.defaultOption.el).clientWidth
+      }
+    }
+
+    constructor(el, option) {
+      if (typeof el != "string") {
+        throw  new Error("el参数必须是字符串")
+      }
+
+      if (this.$(el) == null) {
+        throw  new Error("el的类名在网页上不存在，请检查")
+      }
+      this.defaultOption.el = el;
+      this.defaultOption.loop = option.loop || this.defaultOption.loop
+      this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay
+      this.defaultOption.autoTime = option.autoTime || this.defaultOption.autoTime
+      this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide
+      this.defaultOption.speed = option.speed || this.defaultOption.speed
+
+      this.defaultOption.navigation.prevEl = option?.navigation?.prevEl || this.defaultOption.navigation.prevEl
+      this.defaultOption.navigation.nextEl = option?.navigation?.nextEl || this.defaultOption.navigation.nextEl
+
+      this.defaultOption.pagination.el = option?.pagination?.el || this.defaultOption.pagination.el
+
+      this.init()
+    }
+
+
+    init () {
+      this.createdDot()
+      this.initLeft()
+      if (this.defaultOption.autoPlay) {
+        this.MouseEvent()
+        this.autoPlay()
+      }
+      this.BindNext()
+      this.BindPrev()
+    }
+
+    initLeft () {
+      this.set_left(this.defaultOption.initialSlide * -this.defaultOption.width())
+      this.changeDot(this.defaultOption.initialSlide)
+    }
+
+    // 事件控制中心 就是 {}
+    on (EventType, callback) {
+      this.defaultOption.onEvent[EventType] = callback
+    }
+
+    slideTo(index) {
+      this.set_left(index * -this.defaultOption.width())
+      this.changeDot(index)
+    }
+
+    MouseEvent() {
+
+      this.$(".swiper-wrapper").onmouseover = () => {
+        clearInterval(this.defaultOption.timer)
+      }
+
+      this.$(".swiper-wrapper").onmouseout = () => {
+        this.autoPlay()
+      }
+
+    }
+
+    autoPlay () {
+      this.defaultOption.timer = setInterval(() => {
+        this.motion(-this.defaultOption.width())
+      }, this.defaultOption.autoTime)
+    }
+
+    createdDot() {
+      if (this.defaultOption.pagination.el != null) {
+
+        for (var i = 0; i < this.defaultOption.length(); i++) {
+          this.$(this.defaultOption.pagination.el).innerHTML += `
+            <li class="${i == 0 ? 'active':''}"></li>
+          `
+        }
+
+        // 绑定事件
+        var li = this._(`${this.defaultOption.pagination.el} li`);
+        li.forEach((v,i) => {
+          v.onclick = () => {
+            this.changeDot(i)
+          }
+        });
+
+      }
+    }
+
+    changeDot(index) {
+
+      this.defaultOption.onEvent.hasOwnProperty("slideChange")
+      ? this.defaultOption.onEvent.slideChange(index)
+      : ''
+
+      var li = this._(`${this.defaultOption.pagination.el} li`);
+      li.forEach((itme) => {
+        itme.classList.remove("active")
+      })
+
+      li[index].classList.add("active")
+      this.set_left(index * -this.defaultOption.width())
+    }
+
+    BindPrev() {
+      this.defaultOption.navigation.prevEl == null
+      ? null
+      : this.$(this.defaultOption.navigation.prevEl).onclick = () => {
+          this.motion(this.defaultOption.width())
+        }
+    }
+
+    BindNext() {
+      this.defaultOption.navigation.nextEl == null
+      ? null
+      : this.$(this.defaultOption.navigation.nextEl).onclick = () => {
+          this.motion(-this.defaultOption.width())
+        }
+    }
+
+    motion(offset) {
+      var totalOffset = this.left() + offset;
+      var maxLenght = -this.defaultOption.width() * (this.defaultOption.length() - 1)
+      if (totalOffset < maxLenght) {
+        totalOffset = 0
+      }
+      if (totalOffset > 0) {
+        totalOffset = maxLenght
+      }
+
+      this.set_left(totalOffset)
+      this.changeDot(totalOffset / -this.defaultOption.width())
+    }
+
+
+    left() {
+      return parseInt(this.$(".swiper-wrapper").style.left)
+    }
+
+
+    set_left(offset) {
+      this.$(".swiper-wrapper").style.left = `${offset}px`;
+    }
+
+
+    $(className) {
+      return document.querySelector(`${this.defaultOption.el} ${className}`)
+    }
+
+    _(className) {
+      return document.querySelectorAll(`${this.defaultOption.el} ${className}`)
+    }
+  }
+
+  window.swiper = Swiper
+})()