From 404d38184db323be2fd8c947e7747b40dab4719b Mon Sep 17 00:00:00 2001
From: pbf4giraj <2317509064@qq.com>
Date: Fri, 18 Oct 2024 22:25:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Test1.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 Test1.html
diff --git a/Test1.html b/Test1.html
new file mode 100644
index 0000000..4262514
--- /dev/null
+++ 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>
\ No newline at end of file
