diff --git a/css/style.css b/css/style.css index d65d822..b045492 100644 --- a/css/style.css +++ b/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 { diff --git a/js/carousel.js b/js/carousel.js index c2ea17c..960908d 100644 --- a/js/carousel.js +++ b/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(); + } });