From 032a0172cc50f9803c7fa1226d6e3fed2b7dd5f0 Mon Sep 17 00:00:00 2001
From: GuanM <30427262+sxhoio@users.noreply.github.com>
Date: Fri, 1 Nov 2024 08:31:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=BD=AE=E7=95=AA=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/css/index.css | 56 ++++++++++++++++++++---------------------
 Web/js/main.js    | 64 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+), 29 deletions(-)

diff --git a/Web/css/index.css b/Web/css/index.css
index 64d1067..dda40f2 100644
--- a/Web/css/index.css
+++ b/Web/css/index.css
@@ -53,18 +53,18 @@ body {
   background-color: #f0f0f0;
   cursor: pointer;
 }
-/* 如果想显示进度条 删除此css样式  */
+/* 修改轮播图相关样式 */
 #swipper {
   width: 100%;
   overflow: hidden;
   position: relative;
-  height: 400px; /* 设置一个固定高度 */
+  height: 400px;
 }
 
 .swipper-container {
   display: flex;
   width: 400%;
-  animation: mover 12s steps(4) infinite;
+  transition: transform 0.5s ease;
 }
 
 .swipper-slide {
@@ -79,61 +79,59 @@ body {
 
 .prev, .next {
   position: absolute;
-  width: 32px;
-  height: 32px;
-  top: 184px;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.prev:hover, .next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .prev img, .next img {
-  width: 20px; /* 调整图片大小 */
+  width: 20px;
   height: 20px;
   object-fit: contain;
 }
 
 .prev {
-  left: 40px;
+  left: 20px;
 }
 
 .next {
-  right: 40px;
+  right: 20px;
 }
 
 .counter {
   position: absolute;
-  width: 80px;
-  left: 50%;
-  height: 15px;
-  margin-left: -40px;
-  bottom: 50px;
   display: flex;
-  justify-content: space-between;
+  gap: 10px;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.counter .point {
-  width: 15px;
-  height: 15px;
-  background-color: blueviolet;
+.point {
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
+  transition: background-color 0.3s ease;
 }
 
-.counter .point:hover {
+.point:hover {
   background-color: #fff;
 }
 
-@keyframes mover {
-  0% {
-    margin-left: 0;
-  }
-  100% {
-    margin-left: -400%;
-  }
-}
-
 #newsman {
   padding: 40px 20px;
   text-align: center;
diff --git a/Web/js/main.js b/Web/js/main.js
index e69de29..c6b5d8a 100644
--- a/Web/js/main.js
+++ b/Web/js/main.js
@@ -0,0 +1,64 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // 获取轮播图相关元素
+  const container = document.querySelector('.swipper-container');
+  const slides = document.querySelectorAll('.swipper-slide');
+  const prevBtn = document.querySelector('.prev');
+  const nextBtn = document.querySelector('.next');
+  const points = document.querySelectorAll('.point');
+  
+  let currentIndex = 0;
+  const slideCount = slides.length;
+  
+  // 更新轮播图显示
+  function updateSlide() {
+    // 移动容器到当前索引位置
+    container.style.transform = `translateX(-${currentIndex * 25}%)`;
+    
+    // 更新指示点状态
+    points.forEach((point, index) => {
+      if(index === currentIndex) {
+        point.style.backgroundColor = '#fff';
+      } else {
+        point.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+      }
+    });
+  }
+  
+  // 下一张
+  function nextSlide() {
+    currentIndex = (currentIndex + 1) % slideCount;
+    updateSlide();
+  }
+  
+  // 上一张
+  function prevSlide() {
+    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
+    updateSlide();
+  }
+  
+  // 绑定按钮事��
+  nextBtn.addEventListener('click', nextSlide);
+  prevBtn.addEventListener('click', prevSlide);
+  
+  // 绑定指示点点击事件
+  points.forEach((point, index) => {
+    point.addEventListener('click', () => {
+      currentIndex = index;
+      updateSlide();
+    });
+  });
+  
+  // 自动播放
+  let autoPlayTimer = setInterval(nextSlide, 3000);
+  
+  // 鼠标悬停时暂停自动播放
+  const swipper = document.querySelector('#swipper');
+  swipper.addEventListener('mouseenter', () => {
+    clearInterval(autoPlayTimer);
+  });
+  
+  // 鼠标离开时恢复自动播放
+  swipper.addEventListener('mouseleave', () => {
+    autoPlayTimer = setInterval(nextSlide, 3000);
+  });
+});