init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-Javascript/29-DOMClass-首战-1.html
+++ b/Html-Javascript/29-DOMClass-首战-1.html
@@ -0,0 +1,164 @@
+<!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>
+    <script src="./js/DOMClass.js"></script>
+    <style>
+        #app {
+            box-sizing: border-box;
+            width: 820px;
+            height: 380px;
+            background-color: pink;
+            margin: 100px auto;
+            overflow: hidden;
+        }
+
+        .top {
+            height: 340px;
+            position: relative;
+        }
+
+        .box-content {
+            display: flex;
+            position: absolute;
+            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>
+
+    <script>
+        (() => {
+            // 后端放回的数据
+            let dataLbt = [{
+                img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/e88d7dae2f753763c940d13ef795af56.jpeg",
+                title: "2022 新赛季新征程"
+            }, {
+                img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/647cf82ec515d2e3baef10c4de5f2495.jpeg",
+                title: "2022 新赛季新征程"
+            }, {
+                img: "https://ossweb-img.qq.com/upload/adw/image/977/20220107/47a44be9c9a38ef77f2f7c2a349c90be.jpeg",
+                title: "2022 新赛季新征程"
+            }, {
+                img: "https://ossweb-img.qq.com/upload/adw/image/977/20220101/b0f2ef7d103992e703941e99a4108010.jpeg",
+                title: "2022 新赛季新征程"
+            }, {
+                img: "https://ossweb-img.qq.com/upload/adw/image/977/20211104/023cfa33cf08b513ae430d89740b56f6.jpeg",
+                title: "2022 新赛季新征程"
+            }];
+
+
+            // 渲染页面
+            // top
+            new DOMClass({
+                el: "div",
+                className: "top",
+                elChildren: [{
+                    el: "div",
+                    className: "box-content",
+                    elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
+                }]
+            }, document.querySelector("#app"));
+            // bottom
+            new DOMClass({
+                el: "div",
+                className: "bottom",
+                elChildren: dataLbt.map((ite) => ({ el: "div", className: "item", innerText: ite.title }))
+            }, document.querySelector("#app"));
+
+        })()
+    </script>
+
+    <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();
+
+        // 移除定时器
+        console.dir(app);
+        app.onmouseenter = () => {
+            clearInterval(time);
+        }
+        // 加上定时器
+        app.onmouseleave = () => {
+            zdlb();
+        }
+
+    </script>
+</body>
+
+</html>