ADD file via upload

4 months ago · b4432a6095
parent 623dd03064
commit b4432a6095
1 changed files with 139 additions and 0 deletions
--- a/lunbo.html
+++ b/lunbo.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>
+        .dots {
+            cursor: pointer;
+            background-color: #bbb;
+            height: 15px;
+            width: 15px;
+            margin: 0 2px;
+            border-radius: 50%;
+            display: inline-block;
+        }
+
+        li {
+            list-style-type: circle;
+            float: left;
+cursor: pointer;
+        }
+    </style>
+</head>
+
+<body class="qwer">
+    <div>
+        <button class="but1">
+            < </button>
+                <img src="" alt="">
+                <button  class="but2">></button>
+    </div>
+    <div>
+        <ul class="yd">
+
+        </ul>
+    </div>
+    <!-- <div class="dots">
+
+    </div> -->
+
+    <script>
+        let imgs = [
+            { src: "imgs/10-01.png" },
+            { src: "imgs/10-02.png" },
+            { src: "imgs/11-00.gif" },
+            { src: "imgs/11-01.gif" },
+            { src: "imgs/11-02.gif" },
+            { src: "imgs/11-03.gif" },
+            { src: "imgs/11-04.png" },
+            { src: "imgs/11-05.png" },
+        ]
+
+        const img = document.querySelector('img')
+        let i = 0
+        //body
+        const sxxt = document.querySelector('.qwer')
+        console.log(sxxt);
+
+        sxxt.onload = function () {
+            img.src = imgs[i].src
+            ull[i].style.listStyleType = "disc"
+        }
+        //
+        //下一页
+        function swichh() {
+            // i++
+            // i%=imgs.length
+            i >= imgs.length - 1 ? i = 0 : i++
+            img.src = imgs[i].src
+            console.log(i);
+            ull[i].style.listStyleType = "disc"
+            i == 0 ? ull[imgs.length - 1].style.listStyleType = "circle" : ull[i - 1].style.listStyleType = "circle"
+        }
+        //上一页
+        const syy = document.querySelector('.but1')
+        function sbdj() {
+            i <= 0 ? i = imgs.length - 1 : i--
+            img.src = imgs[i].src
+            console.log(i);
+            ull[i].style.listStyleType = "disc"
+            i == imgs.length - 1 ? ull[0].style.listStyleType = "circle" : ull[i + 1].style.listStyleType = "circle"
+        }
+        syy.addEventListener("click", sbdj)
+        //         function sbyd(){
+        // but.style.backgroundColor="red"
+        // but.style.width="100px"
+        //         }
+        function sbyk() {
+            but.style.width = "100px"
+            but.style.height = "100px"
+            but.style.backgroundColor = "blue"
+        }
+        const but = document.querySelector('.but2  ')
+        //自动
+        setInterval(function () {
+            but.click()
+        }, 2000)
+
+
+        // 事件监听
+        but.addEventListener("click", swichh)
+        //鼠标移动到元素上
+        // but.addEventListener("mouseenter", sbyd)
+        //匿名函数
+        // but.addEventListener("mouseenter", function () {
+        //     but.style.backgroundColor = "red"
+        //     but.style.width = "100px"
+        // })
+        // but.addEventListener("mouseover",sbyd)
+        // but.addEventListener("mouseout", sbyk)
+//鼠标移到
+        // but.onmouseenter = function () {
+        //     but.style.backgroundColor = "red"
+        //     but.style.width = "100px"
+        // }
+        //圆点
+        for (let i = 0; i < imgs.length; i++)
+            document.write(`
+<li></li>
+`)
+        const ull = document.querySelectorAll('li')
+        console.log(ull);
+//点击圆点
+ull[i].addEventListener('click',djyd)
+function djyd(){
+    console.log(11111);
+    
+}
+ 
+
+
+    
+
+    </script>
+</body>
+
+</html>