风大四发安抚打算

css/index.css

@@ -313,22 +313,49 @@
   box-shadow: 0 16px 48px rgba(56, 189, 248, 0.6);
 }
 
-/* 分页器优化 */
+/* 分页器优化 - 带播放进度条 */
 .banner-cont .swiper-pagination-bullet {
-  width: 40px;
+  width: 60px;
   height: 4px;
   background: rgba(148, 163, 184, 0.3);
   opacity: 1;
   border-radius: 2px;
   transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 .banner-cont .swiper-pagination-bullet-active {
-  width: 60px;
+  background: rgba(148, 163, 184, 0.3);
-  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
   box-shadow: 0 2px 10px rgba(56, 189, 248, 0.6);
 }
 
+/* 进度条填充效果 */
+.banner-cont .swiper-pagination-bullet-active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+}
+
+/* 播放进度动画 */
+.banner-cont .swiper-pagination-bullet-active.progress-active::before {
+  animation: progressBar 5s linear forwards;
+}
+
+@keyframes progressBar {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
 /* Banner下方快速入口卡片 - 统一深色玻璃态设计 */
 .banner .banner-s {
   margin-top: -80px;

js/tools.js

@@ -25,10 +25,34 @@ $(function () {
       disableOnInteraction: false, // 用户操作后继续自动播放
     },
     speed: 800, // 切换速度
-    // 如果需要分页器
+    // 分页器配置
     pagination: {
       el: ".swiper-pagination",
       clickable: true,
+      type: 'bullets',
     },
+    // 监听切换事件，重置进度条动画
+    on: {
+      slideChange: function () {
+        // 移除所有进度条动画
+        document.querySelectorAll('.swiper-pagination-bullet').forEach(function(bullet) {
+          bullet.classList.remove('progress-active');
+        });
+        // 给当前激活的添加进度动画
+        const activeBullet = document.querySelector('.swiper-pagination-bullet-active');
+        if (activeBullet) {
+          activeBullet.classList.add('progress-active');
+        }
+      },
+      init: function () {
+        // 初始化时给第一个添加进度动画
+        setTimeout(function() {
+          const activeBullet = document.querySelector('.swiper-pagination-bullet-active');
+          if (activeBullet) {
+            activeBullet.classList.add('progress-active');
+          }
+        }, 100);
+      }
+    }
   });
 })