fix: resolve various issues in hero section
This commit is contained in:
@@ -36,47 +36,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
menuToggle.querySelector('i').classList.toggle('fa-close');
|
||||
});
|
||||
|
||||
// 轮播图逻辑
|
||||
const slides = document.querySelectorAll('.hero-carousel-slide');
|
||||
const dots = document.querySelectorAll('.hero-carousel-dot');
|
||||
let currentSlide = 0;
|
||||
const intervalTime = 5000;
|
||||
|
||||
function updateCarousel() {
|
||||
slides.forEach((slide, index) => {
|
||||
slide.classList.remove('opacity-100');
|
||||
slide.classList.add('opacity-0');
|
||||
dots[index].classList.remove('bg-white');
|
||||
dots[index].classList.add('bg-white/50');
|
||||
});
|
||||
|
||||
slides[currentSlide].classList.remove('opacity-0');
|
||||
slides[currentSlide].classList.add('opacity-100');
|
||||
dots[currentSlide].classList.remove('bg-white/50');
|
||||
dots[currentSlide].classList.add('bg-white');
|
||||
|
||||
const img = slides[currentSlide].querySelector('img');
|
||||
document.querySelectorAll('.hero-carousel-slide img').forEach(i => i.classList.remove('ken-burns-active'));
|
||||
img.classList.add('ken-burns-active');
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
let carouselInterval = setInterval(nextSlide, intervalTime);
|
||||
updateCarousel(); // 初始化
|
||||
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
clearInterval(carouselInterval);
|
||||
currentSlide = index;
|
||||
updateCarousel();
|
||||
carouselInterval = setInterval(nextSlide, intervalTime);
|
||||
});
|
||||
});
|
||||
|
||||
// 模态框逻辑
|
||||
const modal = document.getElementById('solution-modal');
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
|
||||
@@ -1,12 +1,67 @@
|
||||
<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-dark">
|
||||
<style>
|
||||
/* Hero 轮播动画 - 每张图片显示 5 秒，总周期 15 秒 */
|
||||
@keyframes hero-fade {
|
||||
0%, 26.66% { opacity: 1; }
|
||||
33.33%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes hero-zoom {
|
||||
0% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
animation: hero-fade 15s infinite;
|
||||
}
|
||||
|
||||
.hero-slide:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.hero-slide:nth-child(2) {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.hero-slide:nth-child(3) {
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
.hero-slide img {
|
||||
animation: hero-zoom 5s ease-out forwards;
|
||||
}
|
||||
|
||||
.hero-slide:nth-child(1) img {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.hero-slide:nth-child(2) img {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.hero-slide:nth-child(3) img {
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
/* 指示点样式 */
|
||||
.hero-dot {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-dot.active {
|
||||
background-color: #165DFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="hero-carousel-container" class="absolute inset-0 z-0">
|
||||
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100">
|
||||
<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover scale-105">
|
||||
<div class="hero-slide absolute inset-0">
|
||||
<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
|
||||
<div class="hero-slide absolute inset-0">
|
||||
<img src="/img/hero-banner-2.webp" alt="创新科技应用" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
|
||||
<div class="hero-slide absolute inset-0">
|
||||
<img src="/img/hero-banner-3.webp" alt="智慧城市远景" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,14 +83,29 @@
|
||||
</div>
|
||||
|
||||
<div id="hero-carousel-dots" class="absolute bottom-10 left-1/2 lg:left-0 lg:ml-0 lg:translate-x-0 -translate-x-1/2 z-20 flex space-x-3 lg:max-w-7xl lg:mx-auto lg:px-4 w-full justify-center lg:justify-start">
|
||||
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
||||
</button>
|
||||
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
||||
</button>
|
||||
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
||||
</button>
|
||||
<div class="hero-dot h-1.5 w-12 rounded-full"></div>
|
||||
<div class="hero-dot h-1.5 w-12 rounded-full"></div>
|
||||
<div class="hero-dot h-1.5 w-12 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
(function() {
|
||||
const dots = document.querySelectorAll('#hero-carousel-dots .hero-dot');
|
||||
let currentIndex = 0;
|
||||
const interval = 5000; // 5 seconds per slide
|
||||
|
||||
function updateDots() {
|
||||
dots.forEach((dot, index) => {
|
||||
dot.classList.toggle('active', index === currentIndex);
|
||||
});
|
||||
currentIndex = (currentIndex + 1) % dots.length;
|
||||
}
|
||||
|
||||
// Initialize first dot as active
|
||||
updateDots();
|
||||
|
||||
// Update every 5 seconds to match CSS animation
|
||||
setInterval(updateDots, interval);
|
||||
})();
|
||||
</script>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user