完成轮番图

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;

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();
+  }
+  
+  // 绑定按钮事<E992AE><E4BA8B>
+  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);
+  });
+});