From 55a709f09a1b54b4af0e8cb7838f6f3e1d053b4f Mon Sep 17 00:00:00 2001
From: p86outhgb <2676914927@qq.com>
Date: Fri, 18 Oct 2024 20:58:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lunbo.html | 156 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 lunbo.html
diff --git a/lunbo.html b/lunbo.html
new file mode 100644
index 0000000..e43c504
--- /dev/null
+++ b/lunbo.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Carousel</title>
+    <style>
+        .carousel {
+            position: absolute;
+            display: flex;
+            height: 60%;
+            width: 60%;
+            top: 20%;
+            left: 20%;
+            border-radius: 10px;
+
+            overflow: hidden;
+        }
+
+        .carousel img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            transition: opacity 1s ease-in-out;
+        }
+
+        .carousel-dots {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .carousel-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #efc6b0;
+            margin: 0 5px;
+            cursor: pointer;
+        }
+
+        .carousel-dot.active {
+            background-color: #000;
+        }
+
+        #prev-btn {
+            position: absolute;
+            top: 50%;
+            z-index: 999;
+            left: 10%;
+            cursor: pointer;
+            border: none;
+            background-color: transparent;
+        }
+
+        #next-btn {
+            position: absolute;
+            top: 50%;
+            right: 10%;
+            z-index: 999;
+            cursor: pointer;
+            border: none;
+            background-color: transparent;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="carousel-controls">
+        <button id="prev-btn" onclick="prevImage()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor"
+                class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
+                <path fill-rule="evenodd"
+                    d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
+            </svg>
+        </button>
+        <div class="carousel">
+            <img id="img1" src="image1.jpg" alt="Image 1">
+            <img id="img2" src="image2.jpg" alt="Image 2">
+            <img id="img3" src="image3.jpg" alt="Image 3">
+        </div>
+        <button id="next-btn" onclick="nextImage()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor"
+                class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
+                <path fill-rule="evenodd"
+                    d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
+            </svg>
+        </button>
+    </div>
+    <div class="carousel-dots">
+
+    </div>
+    <script>
+        // 图片数组
+        var images = [
+            { src: "image1.jpg", title: "Image 1" },
+            { src: "image2.jpg", title: "Image 2" },
+            { src: "image3.jpg", title: "Image 3" }
+        ];
+        var currentImageIndex = 0;
+
+        // 轮播函数
+        function carousel() {
+            document.getElementById("img" + (currentImageIndex + 1)).style.opacity = "0";
+            currentImageIndex = (currentImageIndex + 1) % images.length;
+            document.getElementById("img" + (currentImageIndex + 1)).style.opacity = "1";
+            updateDots();
+            setTimeout(carousel, 2000);
+        }
+        // 初始化圆点
+        function initDots() {
+            var dotsContainer = document.querySelector(".carousel-dots");
+            images.forEach(function (_, index) {
+                var dot = document.createElement("div");
+                dot.classList.add("carousel-dot");
+                dot.addEventListener("click", function () {
+                    showImageAtIndex(index);
+                });
+                dotsContainer.appendChild(dot);
+            });
+            updateDots();
+        }
+        // 更新圆点状态
+        function updateDots() {
+            var dots = document.querySelectorAll(".carousel-dot");
+            dots.forEach(function (dot, index) {
+                dot.classList.toggle("active", index === currentImageIndex);
+            });
+        }
+
+        function showImageAtIndex(index) {
+            if (index < 0 || index >= images.length) return;
+            currentImageIndex = index;
+            carousel();
+        }
+
+        function prevImage() {
+            currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
+            carousel();
+        }
+
+        function nextImage() {
+            currentImageIndex = (currentImageIndex + 1) % images.length;
+            carousel();
+        }
+        carousel();
+        initDots();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
