first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/6.19/imdex.css
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/6.19/imdex.css
@@ -0,0 +1,45 @@
+.swiper-container {
+    width: 520px;
+    height: 280px;
+    overflow: hidden;
+    margin: 100px auto;
+    position: relative;
+}
+.swiper-pagination {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    display: flex;
+    justify-content: center;
+}
+.swiper-pagination-item {
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    background: #fff;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.swiper-wrapper {
+    display: flex;
+}
+.swiper-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 25px;
+    cursor: pointer;
+}
+.swiper-button-prev {
+    left: 10px;
+}
+.swiper-button-next {
+    right: 10px;
+}
+.active {
+    background: red;
+}
+.dh {
+    transition-duration: 300ms;
+}
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/6.19/index.html
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/6.19/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+    <link rel="stylesheet" href="imdex.css">
+</head>
+
+<body>
+    <div class="swiper-container">
+
+        <div class="swiper-wrapper dh" style="transform: translateX(0px);">
+            <div class="swiper-slide">
+                <img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
+            </div>
+            <div class="swiper-slide">
+                <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
+            </div>
+            <div class="swiper-slide">
+                <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
+            </div>
+            <div class="swiper-slide">
+                <img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
+            </div>
+        </div>
+
+        <div class="swiper-pagination">
+            <div class="swiper-pagination-item active"></div>
+            <div class="swiper-pagination-item"></div>
+            <div class="swiper-pagination-item"></div>
+        </div>
+
+//测试
+        <div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
+        <div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
+
+
+    </div>
+</body>
+<script src="index.js"></script>
+
+</html>
--- a/历届学生/吴欣阳/项目开发/练习项目/课程练习/6.19/index.js
+++ b/历届学生/吴欣阳/项目开发/练习项目/课程练习/6.19/index.js
@@ -0,0 +1,84 @@
+var pagination = _(".swiper-pagination .swiper-pagination-item");
+var timer;
+//上一页
+$(".swiper-button-prev").onclick = function() {
+    motion(520, 'prev')
+}
+
+//下一页
+$(".swiper-button-next").onclick = function() {
+    motion(-520, 'next')
+}
+
+function motion(offset, type) {
+    if (translateX() == -1560) {
+        $(".swiper-wrapper").classList.remove("dh")
+        SetTranslateX(0)
+    }
+
+    setTimeout(() => {
+        $(".swiper-wrapper").classList.add("dh")
+        var totalDistance = translateX() + offset;
+        if (totalDistance < -1560) {
+            totalDistance = 0
+        }
+
+        if (totalDistance > 0) {
+            totalDistance = -1560
+        }
+
+        var index = Math.abs(totalDistance / 520)
+        console.log(index)
+        if (index == 3) {
+            if (type == "next") {
+                index = 0
+                changePagination(index)
+                SetTranslateX(totalDistance)
+            } else {
+                $(".swiper-wrapper").classList.remove("dh")
+                SetTranslateX(-1560)
+                setTimeout(() => {
+                    totalDistance = -1040
+                    $(".swiper-wrapper").classList.add("dh")
+                    index = 2
+                    changePagination(index)
+                    SetTranslateX(totalDistance)
+                }, 100)
+            }
+        } else {
+            changePagination(index)
+            SetTranslateX(totalDistance)
+        }
+    }, 100)
+
+}
+
+
+pagination.forEach((v, i) => {
+    v.onclick = () => {
+        changePagination(i)
+    }
+});
+
+function changePagination(i) {
+    pagination.forEach(item => item.classList.remove("active"))
+    pagination[i].classList.add("active")
+    SetTranslateX(i * -520)
+}
+
+//让图片移动
+function SetTranslateX(distance) {
+    $(".swiper-wrapper").style.transform = `translateX(${distance}px)`
+}
+
+function translateX() {
+    return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
+}
+
+function $(className) {
+    return document.querySelector(className);
+}
+
+function _(className) {
+    return document.querySelectorAll(className);
+}