first commit

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-28/作业/banner_下标.html

@@ -0,0 +1,214 @@
+<!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>banner_1</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3889063_w9zrujr1cf.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            border: 0;
+        }
+
+        .banner {
+            width: 560px;
+            height: 315px;
+            background: rgb(190, 165, 165);
+            margin: 0 auto;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .banner .banner_ul {
+            display: flex;
+            position: absolute;
+            transition: all 1s;
+        }
+
+        .banner_ul li {
+            width: 560px;
+            height: 315px;
+        }
+
+        .banner_ul li img {
+            width: 560px;
+            height: 315px;
+        }
+
+        .button {
+            width: 100%;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            justify-content: space-between;
+            font-size: 30px;
+        }
+
+        .button div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 50px;
+            background: #00000061;
+            font-size: 20px;
+            color: #fff;
+            cursor: pointer;
+        }
+
+        .button div:last-child {
+            transform: rotate(-90deg);
+        }
+
+        .banner_dot {
+            position: absolute;
+            bottom: 5px;
+            left: 50%;
+            transform: translatey(-50%);
+            width: 100%;
+            display: flex;
+        }
+
+        .banner_dot li {
+            width: 13px;
+            height: 13px;
+            border-radius: 50%;
+            background: #fff;
+            margin-left: 5px;
+            cursor: pointer;
+        }
+
+        .banner_dot li:first-child {
+            margin-left: 0;
+        }
+
+        .banner_dot .active {
+            background: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="banner">
+        <ul class="banner_ul" style="left: 0px">
+            <li><img src="https://img.alicdn.com/imgextra/i4/6000000001058/O1CN017HPzlT1Jgbr6Rvc4X_!!6000000001058-0-octopus.jpg"
+                    alt=""></li>
+            <li><img src="https://img.alicdn.com/imgextra/i4/6000000003739/O1CN01ks7Fjr1dUVhwWXLWB_!!6000000003739-0-octopus.jpg"
+                    alt=""></li>
+            <li><img src="https://img.alicdn.com/imgextra/i1/6000000003795/O1CN01g3s9jf1du9t00iRTU_!!6000000003795-0-octopus.jpg"
+                    alt=""></li>
+        </ul>
+        <div class="button">
+            <div class="button_left  iconfont icon-zhankai-copy"></div>
+            <div class="button_right iconfont icon-zhankai"></div>
+        </div>
+        <ul class="banner_dot">
+            <li class="active"></li>
+            <li></li>
+            <li></li>
+        </ul>
+    </div>
+</body>
+<script>
+    //轮播图
+    //点击按钮向左移动，向右移动
+    //小图标跟随点击移动
+
+    var buttonLeft = $(".button_left"),
+        buttoRight = $(".button_right"),
+        buttonUl = $(".banner_ul"),
+        active = _(".active");
+    banner_dot = _(".banner_dot li")
+
+    var gtime = null;
+    var index = 0;
+
+    buttonLeft.onclick = () => {
+        sport(-1)
+    }
+    buttoRight.onclick = () => {
+        sport(1)
+    }
+
+    banner_dot.forEach((v, i) => {
+        v.onclick = () => {
+            changeActive(i);
+        }
+    })
+    $(".banner").onmouseover = () => {
+        clearInterval(gtime)
+    }
+    $(".banner").onmouseout = () => {
+        auto()
+    }
+    function changeActive(i) {
+        banner_dot.forEach(val => {
+            val.classList.remove("active");
+        })
+        banner_dot[i].classList.add("active");
+        buttonUl.style.left = `${i * -560}px`
+        index = i
+        //console.log(index);
+    }
+
+    function sport(offset) {
+        //通过下标的方式改变轮播图移动
+        index += offset
+
+        //边界判断
+        if( index <0){
+            index = 2
+        }
+        if(index >2){
+            index = 0
+        }
+       // console.log("index",index);
+       
+        if(index >= 0 && index <=2){
+             changeActive(index)
+        }
+        // console.log("index",index);
+        // if(index >=-2 && index <=0 ){
+        //     changeActive(index)
+        // }
+        // //console.log(parseInt(newLeft));
+
+        //通过改变left值改变轮播图移动
+        // var oldLeft = parseInt(buttonUl.style.left);
+        // var newLeft = `${oldLeft + offset}px `
+        // if (parseInt(newLeft) >= -1120 && parseInt(newLeft) <= 0) {
+        //     changeActive(parseInt(newLeft) / -560)
+        // }
+        // //向左最大移动到1120，向右最大-1120 >=0 || <=1260
+        // if (parseInt(newLeft) >= -1120 && parseInt(newLeft) <= 0) {
+        //     buttonUl.style.left = newLeft;
+        // } else {
+        //     newLeft = `${0}px`
+        //     buttonUl.style.left = newLeft;
+        // }
+        // changeActive(parseInt(newLeft) / -560)
+
+    }
+
+    function auto() {
+        gtime = setInterval(() => {
+            buttoRight.onclick()
+        }, 2500)
+    }
+    auto()
+    
+    function $(className) {
+        return document.querySelector(className);
+    }
+    function _(className) {
+        return document.querySelectorAll(className);
+    }
+</script>
+
+</html>