页面

1 month ago · 404d38184d
parent 70c4c1d2f2
commit 404d38184d
1 changed files with 110 additions and 0 deletions
--- a/Test1.html
+++ b/Test1.html
@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>轮播图</title>
+</head>
+
+<body>
+    <div style="display: flex;flex-direction: row; justify-content: center; align-items: center;">
+        <div id="up">
+            《《
+        </div>
+        <img src="./img/p1.jpg" style="height: 400px; width: 600px;margin: 0px 40px 0px 40px;" id="imgDom">
+        <div id="down">
+            》》
+        </div>
+    </div>
+    <div id="imgButton" style="display: flex;flex-direction: row; justify-content: center; margin-top: 20px;">
+
+    </div>
+</body>
+<style>
+    /* 空心圆 */
+    .classButton {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid;
+        margin: 0px 10px 0px 10px ;
+        background-color: pink;
+        border: none;
+    }
+
+    .active {
+        border: solid;
+        border-color: skyblue;
+        background-color: #fff;
+    }
+</style>
+<script type="text/javaScript" src="./jquery-3.7.1.min.js"></script>
+
+<script>
+    const imgArr = [
+        {
+            id: 1,
+            img: "./img/p1.jpg"
+        },
+        {
+            id: 2,
+            img: "./img/p2.jpg"
+        },
+        {
+            id: 3,
+            img: "./img/p3.jpg"
+        },
+        {
+            id: 4,
+            img: "./img/p4.jpg"
+        }
+    ]
+    let index = 0
+    let imgDom = $("#imgDom")
+    let imgDiv = $("#imgButton")
+    let upImg = $("#up")
+    let downImg = $("#down")
+    for (let i = 0; i < imgArr.length; i++) {
+        imgDiv.append($('<div class="classButton"></div>'))
+    }
+    let imgButtons = $("#imgButton > div")
+    upImg.on("click",function() {
+        if (index <= 0) {
+            index = imgArr.length - 1
+        } else {
+            index--
+        }
+        imgButtons.removeClass('active')
+        imgButtons.eq(index).addClass('active')
+        imgDom.attr("src", imgArr[index].img)
+    })
+    downImg.click(() => {
+        console.log(index)
+        if (index >= imgArr.length - 1) {
+            index = 0
+        } else {
+            index++
+        }
+        imgButtons.removeClass('active')
+        imgButtons.eq(index).addClass('active')
+
+        imgDom.attr("src", imgArr[index].img)
+    })
+
+    for(let i=0;i<imgArr.length;i++){
+
+        imgButtons.eq(i).attr("value",i)
+    }
+    imgButtons.on("click",function(){
+            index = $(this).attr('value')
+            console.log(index)
+            imgDom.attr("src", imgArr[index].img)
+            imgButtons.removeClass('active')
+            $(this).addClass('active')
+    })
+    
+</script>
+
+
+</html>