first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/项目练习/上课项目/js
+++ b/历届学生/front-end-team-10/项目练习/上课项目/js
@@ -0,0 +1,183 @@
+<!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>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .swiper {
+            width: 630px;
+            height: 315px;
+            margin: 100px auto;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .swiper .swiper_wrap {
+            display: flex;
+            position: relative;
+            transition: all 1s;
+        }
+
+        .swiper .swiper_wrap li {}
+
+        .swiper .swiper_wrap li img {
+            width: 630px;
+            height: 315px;
+        }
+
+        .swiper .button {
+            width: 100%;
+            position: absolute;
+            top: 50%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-50%);
+        }
+
+        .swiper .button div {
+            color: #fff;
+            font-size: 20px;
+            background: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+        }
+
+        .swiper .button .left {}
+
+        .swiper .button .right {}
+
+        .swiper .dot {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 20px;
+            display: flex;
+        }
+
+        .swiper .dot li {
+            width: 13px;
+            height: 13px;
+            background: #fff;
+            border-radius: 100%;
+            margin-right: 10px;
+            cursor: pointer;
+        }
+
+        .swiper .dot li:last-child {
+            margin-right: 0px;
+        }
+
+        .swiper .dot .active {
+            background: red;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="swiper">
+        <ul class="swiper_wrap" style="left: 0px;">
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
+                    alt="">
+            </li>
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
+                    alt="">
+            </li>
+            <li>
+                <img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
+                    alt="">
+            </li>
+        </ul>
+        <div class="button">
+            <div class="left">< </div>
+             <div class="right"> > </div>
+            </div>
+            <ul class="dot">
+                <li class="active"></li>
+                <li></li>
+                <li></li>
+            </ul>
+        </div>
+</body>
+
+<script>
+    // TODO 使用 下标完成对 sport 的改造，
+    // 实现 调用 changeDotActive 只需要传入  下标即可
+    var timeId = null;
+
+    $(".right").onclick = () => {
+        sport(-630)
+    }
+
+    $(".left").onclick = () => {
+        sport(630)
+    }
+
+    _(".dot li").forEach((v, i) => {
+        v.onclick = () => {
+            changeDotActive(i)
+        }
+    })
+
+    $(".swiper").onmouseover = () => {
+        clearInterval(timeId)
+    }
+
+    $(".swiper").onmouseout = () => {
+        auto()
+    }
+
+    function sport(offset) {
+        var oldLeft = parseInt($(".swiper_wrap").style.left);
+        console.log("a",$(".swiper_wrap").style.left);
+        var newLeft = oldLeft + offset;
+        if (newLeft <= 0 && newLeft >= -1260) {
+            changeDotActive(newLeft / -630)
+            // changeDotActive(i)
+        }
+    }
+
+    function changeDotActive(i) {
+        _(".dot li").forEach(val => {
+            val.classList.remove("active");
+        })
+        _(".dot li")[i].classList.add("active")
+        $(".swiper_wrap").style.left = `${i * -630}px`
+    }
+
+    function auto() {
+        timeId = setInterval(() => {
+            $(".right").onclick()
+        }, 2000)
+    }
+
+
+
+    auto()
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+
+</html>