Adjust hero carousel behavior

css/style.css

@@ -82,7 +82,7 @@ body {
     position: absolute;
     inset: 0;
     z-index: 1;
-    background: linear-gradient(105deg, rgba(232, 238, 142, 0.62) 0%, rgba(188, 221, 126, 0.52) 48%, rgba(112, 190, 142, 0.42) 100%);
+    background: rgba(154, 205, 50, 0.58);
 }
 
 .hero-brand-slide > img {
@@ -113,6 +113,7 @@ body {
 .hero-brand-content {
     max-width: 920px;
     padding-left: 82px;
+    transform: translateY(24px);
 }
 
 .hero-brand-heading {

js/carousel.js

@@ -1,15 +1,25 @@
-// 轮播功能
 let currentSlideIndex = 1;
+let carouselTimer = null;
+let carouselPausedByUser = false;
+const carouselDelay = 9000;
+
 showSlides(currentSlideIndex);
+startCarousel();
 
 function currentSlide(n) {
-    showSlides(currentSlideIndex = n);
+    currentSlideIndex = n;
+    showSlides(currentSlideIndex);
+    pauseCarousel();
 }
 
 function showSlides(n) {
     const slides = document.querySelectorAll('.hero-slide');
     const dots = document.querySelectorAll('.carousel-dot');
 
+    if (!slides.length || !dots.length) {
+        return;
+    }
+
     if (n > slides.length) {
         currentSlideIndex = 1;
     }
@@ -24,17 +34,33 @@ function showSlides(n) {
     dots[currentSlideIndex - 1].classList.add('active');
 }
 
-// 自动轮播
-setInterval(() => {
+function nextSlide() {
     currentSlideIndex++;
     showSlides(currentSlideIndex);
-}, 5000);
+}
 
-// 按钮点击事件
-document.querySelectorAll('.btn-primary').forEach(btn => {
-    btn.addEventListener('click', function() {
-        const targetId = this.textContent.includes('了解') ? '#products' : '#contact';
-        // 这里可以添加页面跳转逻辑
-        console.log('按钮被点击');
-    });
+function startCarousel() {
+    stopCarousel();
+    carouselTimer = setInterval(nextSlide, carouselDelay);
+}
+
+function stopCarousel() {
+    if (carouselTimer) {
+        clearInterval(carouselTimer);
+        carouselTimer = null;
+    }
+}
+
+function pauseCarousel() {
+    carouselPausedByUser = true;
+    stopCarousel();
+}
+
+document.addEventListener('visibilitychange', () => {
+    stopCarousel();
+
+    if (!document.hidden) {
+        carouselPausedByUser = false;
+        startCarousel();
+    }
 });