Fix carousel pause behavior

css/style.css

@@ -10,6 +10,7 @@
     --primary-purple: #6a2c91;
     --secondary-blue: #2a5298;
     --accent-color: #00d4ff;
+    --hero-overlay-color: rgba(127, 255, 212, 0.58);
     --light-bg: #f5f7fa;
     --dark-text: #333;
     --light-text: #666;
@@ -82,7 +83,7 @@ body {
     position: absolute;
     inset: 0;
     z-index: 1;
-    background: rgba(154, 205, 50, 0.58);
+    background: var(--hero-overlay-color);
 }
 
 .hero-brand-slide > img {
@@ -131,6 +132,7 @@ body {
 }
 
 .hero-brand-heading h1 {
+    color: var(--primary-purple);
     margin-bottom: 0;
 }
 

index.html

@@ -136,10 +136,10 @@
         </div>
 
         <div class="carousel-controls">
-            <button class="carousel-dot active" onclick="currentSlide(1)"></button>
-            <button class="carousel-dot" onclick="currentSlide(2)"></button>
-            <button class="carousel-dot" onclick="currentSlide(3)"></button>
-            <button class="carousel-dot" onclick="currentSlide(4)"></button>
+            <button class="carousel-dot active" data-slide="1" aria-label="查看第 1 张轮播"></button>
+            <button class="carousel-dot" data-slide="2" aria-label="查看第 2 张轮播"></button>
+            <button class="carousel-dot" data-slide="3" aria-label="查看第 3 张轮播"></button>
+            <button class="carousel-dot" data-slide="4" aria-label="查看第 4 张轮播"></button>
         </div>
     </section>
 

js/carousel.js

@@ -2,9 +2,29 @@ let currentSlideIndex = 1;
 let carouselTimer = null;
 let carouselPausedByUser = false;
 const carouselDelay = 9000;
+const pauseStorageKey = 'haigujiCarouselPaused';
 
-showSlides(currentSlideIndex);
-startCarousel();
+initCarousel();
+
+function initCarousel() {
+    const dots = document.querySelectorAll('.carousel-dot');
+
+    dots.forEach(dot => {
+        dot.addEventListener('click', () => {
+            const targetSlide = Number(dot.dataset.slide);
+            if (!Number.isNaN(targetSlide)) {
+                currentSlide(targetSlide);
+            }
+        });
+    });
+
+    carouselPausedByUser = sessionStorage.getItem(pauseStorageKey) === 'true';
+    showSlides(currentSlideIndex);
+
+    if (!carouselPausedByUser) {
+        startCarousel();
+    }
+}
 
 function currentSlide(n) {
     currentSlideIndex = n;
@@ -53,14 +73,28 @@ function stopCarousel() {
 
 function pauseCarousel() {
     carouselPausedByUser = true;
+    sessionStorage.setItem(pauseStorageKey, 'true');
     stopCarousel();
 }
 
-document.addEventListener('visibilitychange', () => {
-    stopCarousel();
+window.addEventListener('pagehide', () => {
+    sessionStorage.removeItem(pauseStorageKey);
+});
 
-    if (!document.hidden) {
+window.addEventListener('pageshow', event => {
+    if (event.persisted) {
         carouselPausedByUser = false;
         startCarousel();
     }
 });
+
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+        stopCarousel();
+        return;
+    }
+
+    if (!carouselPausedByUser) {
+        startCarousel();
+    }
+});