init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-Javascript/轮播图/index-传统.html
+++ b/Html-Javascript/轮播图/index-传统.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        #app{
+            box-sizing: border-box;
+            width: 820px;
+            height: 380px;
+            background-color: salmon;
+            margin: 100px auto;
+            overflow: hidden;
+        }
+        .top {
+            position: relative;
+            height: 340px;
+        }
+        .box-content{
+            position: absolute;
+            display: flex;
+            left: 0; /* 轮播*/
+            transition: .4s;
+            /* 过度 */
+        }
+        .bottom {
+            display: flex;
+            height: 40px;
+            line-height: 40px;
+            color: #424242;
+            font-size: 14px;
+            
+        }
+        .bottom .item {
+            width: 20%;
+            background-color: #E3E2E2;
+            text-align: center;
+            cursor: pointer;
+        }
+        .bottom .item.active {
+            color: #cea861;
+            border-bottom:solid 2px #cea861 ;
+        }
+
+
+
+    </style>
+</head>
+<body>
+
+    <div id="app">
+        <div class="top">
+            <div class="box-content">
+                <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220222/132b7dea7a8ff48b44abbfc1bbaf4239.jpeg" alt="">
+                <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220223/bf4d1c076c6e039e46f9b723c60c0820.jpeg" alt="">
+                <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220227/b17b2308283beb3d3b20550d6a6cec3f.jpeg" alt="">
+                <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220217/9168da7e2fde10dfdb6a577f910daa90.jpeg" alt="">
+                <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220214/8d334a73733222ee93e89b3863069a70.jpeg" alt="">
+            </div>
+        </div>
+
+        <div class="bottom">
+            <div class="item active">神话级小小英雄</div>
+            <div class="item">2022金虎贺岁</div>
+            <div class="item">海克斯冠军杯</div>
+            <div class="item">云顶宝典 霓虹宝库</div>
+            <div class="item">洛与霞雕塑 预定开启</div>
+        </div>
+
+    </div>
+   
+<script>
+    //旗帜
+    let indexNew =0;  //现在
+    let indexLod =indexNew;  //过去
+
+    let item = document.querySelectorAll(".bottom .item");
+    let boxContent= document.querySelector(".box-content");
+    let app = document.querySelector("#app");
+
+    item.forEach((el,i)=>{
+        el.onclick=()=>{
+          view(i);
+        }
+    })
+
+    function view(i){
+          //新旗子改变前 保留为 旧旗子
+            indexLod = indexNew;
+
+            //更新新旗子
+            indexNew =i;
+
+            //旧的样式图去掉
+            item[indexLod].classList.remove("active");
+
+
+            //添加样式
+            item[indexNew].classList.add("active");
+
+            //让图片动
+            boxContent.style.left =  `${820 * indexNew * -1}px`;
+
+
+    }
+
+    //自动轮播
+    let time
+    function zdlb(){
+        time = setInterval(()=>{
+            let i= indexNew;
+            i++;
+            //边界值处理          
+            if(i>=item.length){
+                i=0;
+            }
+            view(i);
+        },1000)
+    }
+    zdlb();
+
+    //移除定时器
+    app.onmouseenter =()=>{
+        clearInterval(time);
+    }
+
+    //加上定时器
+    app.onmouseleave= ()=>{
+        zdlb();
+    }
+
+
+
+</script>
+
+</body>
+</html>