first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- 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>