first commit

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.14/index.html

@@ -0,0 +1,93 @@
+<!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>Document</title>
+    <style>
+        body,ul,li,p{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+
+        .main{
+            width: 520px;
+            height: 280px;
+            margin: 20px auto;
+            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{
+            position: relative;
+            display: flex;
+        }
+        .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;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="main">
+
+        <div class="swiper" style="left: 0px;">
+            <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">
+            <li class="active"></li>
+            <li></li>
+            <li></li>
+        </ul>
+    </div>
+</body>
+<script src="./index.js"></script>
+</html>

历届学生/韩一伟/项目开发/练习项目/作业/2021.07.14/index.js

@@ -0,0 +1,72 @@
+var time = null;
+
+
+$(".next").onclick = () => {
+    motion(-520)
+}
+
+$(".prev").onclick = () => {
+    motion(520)
+}
+
+_(".dot li").forEach((v, i) => {
+    v.onclick = function () {
+        changeDot(i)
+    }
+});
+
+
+
+function changeDot(index) {
+    var liArr = _(".dot li")
+    liArr.forEach((item) => {
+        item.classList.remove("active")
+    })
+    liArr[index].classList.add("active")
+    set_Left(index * -520)
+}
+
+
+function motion(offset) {
+    var totalOffset = left() + offset
+
+    if (totalOffset < -1040) {
+        totalOffset = 0
+    }
+    if (totalOffset > 0) {
+        totalOffset = -1040
+    }
+    set_Left(totalOffset)
+    changeDot(totalOffset / -520)
+}
+
+function autoPlay() {
+    time = setInterval(() => {
+        $(".next").onclick()
+    }, 1000);
+}
+
+$(".main").onmouseover = () => {
+    clearInterval(time)
+}
+
+$(".main").onmouseout = () => {
+    autoPlay()
+}
+autoPlay()
+
+function set_Left(offset) {
+    $(".swiper").style.left = `${offset}px`;
+}
+
+function left() {
+    return parseInt($(".swiper").style.left)
+}
+
+function $(className) {
+    return document.querySelector(className)
+}
+
+function _(className) {
+    return document.querySelectorAll(className)
+}