更好发挥

css/index.css

@@ -78,6 +78,7 @@
   background: rgba(15, 23, 42, 0.95);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+  z-index: 998;
 }
 
 #index .nav-item-box {
@@ -1812,6 +1813,8 @@ html {
 /* 确保所有section背景连贯 */
 #index .section.banner {
   background: transparent;
+  position: relative;
+  z-index: 1;
 }
 
 #index .section.service {

index.html

@@ -78,7 +78,6 @@
       <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>
     </div>
-    </div>
     <div class="banner-s">
       <div class="section-content banner-list">
         <div class="banner-item" id="cloud-box">

js/tools.js

@@ -1,58 +1,64 @@
 $(function () {
-  var galleryThumbs = new Swiper('.gallery-thumbs', {
+  // 产品详情页的图片预览轮播（仅在存在时初始化）
-    spaceBetween: 10,
+  if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) {
-    slidesPerView: 10,
+    var galleryThumbs = new Swiper('.gallery-thumbs', {
-    freeMode: true,
+      spaceBetween: 10,
-    watchSlidesVisibility: true,
+      slidesPerView: 10,
-    watchSlidesProgress: true,
+      freeMode: true,
-    noSwiping: true
+      watchSlidesVisibility: true,
-
+      watchSlidesProgress: true,
-  });
+      noSwiping: true
-  var galleryTop = new Swiper('.gallery-top', {
+    });
-    spaceBetween: 10,
+    var galleryTop = new Swiper('.gallery-top', {
-    thumbs: {
+      spaceBetween: 10,
-      swiper: galleryThumbs
+      thumbs: {
-    },
+        swiper: galleryThumbs
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  });
-  const mySwiper = new Swiper(".banner-cont", {
-    loop: true, // 循环模式选项
-    autoplay: {
-      delay: 5000, // 5秒自动切换
-      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 () {
+      navigation: {
-        // 初始化时给第一个添加进度动画
+        nextEl: '.swiper-button-next',
-        setTimeout(function() {
+        prevEl: '.swiper-button-prev',
-          const activeBullet = document.querySelector('.swiper-pagination-bullet-active');
+      },
+    });
+  }
+
+  // 首页 Banner 轮播（仅在存在时初始化）
+  if ($('.banner-cont').length > 0) {
+    const mySwiper = new Swiper(".banner-cont", {
+      loop: true, // 循环模式选项
+      autoplay: {
+        delay: 5000, // 5秒自动切换
+        disableOnInteraction: false, // 用户操作后继续自动播放
+      },
+      speed: 800, // 切换速度
+      // 分页器配置
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+        type: 'bullets',
+      },
+      // 监听切换事件，重置进度条动画
+      on: {
+        slideChange: function () {
+          // 移除所有进度条动画
+          document.querySelectorAll('.banner-cont .swiper-pagination-bullet').forEach(function(bullet) {
+            bullet.classList.remove('progress-active');
+          });
+          // 给当前激活的添加进度动画
+          const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
           if (activeBullet) {
             activeBullet.classList.add('progress-active');
           }
-        }, 100);
+        },
+        init: function () {
+          // 初始化时给第一个添加进度动画
+          setTimeout(function() {
+            const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
+            if (activeBullet) {
+              activeBullet.classList.add('progress-active');
+            }
+          }, 100);
+        }
       }
-    }
+    });
-  });
+  }
 })