script.js

// ===== 页面加载完成后的初始化 =====
document.addEventListener('DOMContentLoaded', function() {
    // 初始化所有功能
    initNavbar();
    initCarousel();
    initSmoothScroll();
    initBackToTop();
    initMenuToggle();
    initWechatButton();
});

// ===== 导航栏滚动效果 =====
function initNavbar() {
    const navbar = document.querySelector('.navbar');
    const scrollThreshold = 50;
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > scrollThreshold) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
    
    // 初始检查
    if (window.scrollY > scrollThreshold) {
        navbar.classList.add('scrolled');
    }
}

// ===== 轮播图功能 =====
function initCarousel() {
    const carouselTrack = document.querySelector('.carousel-track');
    const slides = document.querySelectorAll('.carousel-slide');
    const indicators = document.querySelectorAll('.indicator');
    const prevBtn = document.querySelector('.carousel-btn.prev');
    const nextBtn = document.querySelector('.carousel-btn.next');
    
    let currentSlide = 0;
    const totalSlides = slides.length;
    const slideInterval = 5000; // 5秒自动切换
    let autoSlideTimer;
    
    // 更新轮播位置
    function updateCarousel() {
        carouselTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
        
        // 更新指示点
        indicators.forEach((indicator, index) => {
            if (index === currentSlide) {
                indicator.classList.add('active');
            } else {
                indicator.classList.remove('active');
            }
        });
        
        // 更新幻灯片状态
        slides.forEach((slide, index) => {
            if (index === currentSlide) {
                slide.classList.add('active');
            } else {
                slide.classList.remove('active');
            }
        });
    }
    
    // 下一张幻灯片
    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateCarousel();
        resetAutoSlide();
    }
    
    // 上一张幻灯片
    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        updateCarousel();
        resetAutoSlide();
    }
    
    // 跳转到指定幻灯片
    function goToSlide(index) {
        currentSlide = index;
        updateCarousel();
        resetAutoSlide();
    }
    
    // 重置自动轮播计时器
    function resetAutoSlide() {
        clearInterval(autoSlideTimer);
        autoSlideTimer = setInterval(nextSlide, slideInterval);
    }
    
    // 事件监听器
    if (prevBtn) {
        prevBtn.addEventListener('click', prevSlide);
    }
    
    if (nextBtn) {
        nextBtn.addEventListener('click', nextSlide);
    }
    
    // 指示点点击事件
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => goToSlide(index));
    });
    
    // 触摸滑动支持
    let touchStartX = 0;
    let touchEndX = 0;
    
    carouselTrack.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    });
    
    carouselTrack.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    });
    
    function handleSwipe() {
        const swipeThreshold = 50;
        const diff = touchStartX - touchEndX;
        
        if (Math.abs(diff) > swipeThreshold) {
            if (diff > 0) {
                // 向左滑动，下一张
                nextSlide();
            } else {
                // 向右滑动，上一张
                prevSlide();
            }
        }
    }
    
    // 开始自动轮播
    resetAutoSlide();
    
    // 鼠标悬停时暂停自动轮播
    const carousel = document.querySelector('.carousel');
    if (carousel) {
        carousel.addEventListener('mouseenter', () => {
            clearInterval(autoSlideTimer);
        });
        
        carousel.addEventListener('mouseleave', () => {
            resetAutoSlide();
        });
    }
}

// ===== 平滑滚动 =====
function initSmoothScroll() {
    const navLinks = document.querySelectorAll('.nav-link');
    
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                // 更新导航链接状态
                navLinks.forEach(navLink => navLink.classList.remove('active'));
                this.classList.add('active');
                
                // 平滑滚动到目标
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
}

// ===== 回到顶部按钮 =====
function initBackToTop() {
    const backToTopBtn = document.querySelector('.footer-bottom .back-to-top');
    
    if (backToTopBtn) {
        // 显示/隐藏按钮
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                backToTopBtn.style.opacity = '1';
                backToTopBtn.style.visibility = 'visible';
            } else {
                backToTopBtn.style.opacity = '0';
                backToTopBtn.style.visibility = 'hidden';
            }
        });
        
        // 点击事件
        backToTopBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 初始状态
        backToTopBtn.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
        backToTopBtn.style.opacity = '0';
        backToTopBtn.style.visibility = 'hidden';
    }
}

// ===== 移动端菜单切换 =====
function initMenuToggle() {
    const menuToggle = document.querySelector('.menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            this.setAttribute('aria-expanded', navMenu.classList.contains('active'));
            
            // 切换图标
            const icon = this.querySelector('i');
            if (navMenu.classList.contains('active')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });
        
        // 点击菜单项后关闭菜单（移动端）
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                if (window.innerWidth <= 768) {
                    navMenu.classList.remove('active');
                    menuToggle.querySelector('i').classList.remove('fa-times');
                    menuToggle.querySelector('i').classList.add('fa-bars');
                    menuToggle.setAttribute('aria-expanded', 'false');
                }
            });
        });
        
        // 窗口大小变化时重置菜单
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                navMenu.classList.remove('active');
                menuToggle.querySelector('i').classList.remove('fa-times');
                menuToggle.querySelector('i').classList.add('fa-bars');
                menuToggle.setAttribute('aria-expanded', 'false');
            }
        });
    }
}

// ===== 微信公众号按钮交互 =====
function initWechatButton() {
    const wechatBtn = document.querySelector('.wechat-card.compact .wechat-btn');
    const qrPlaceholder = document.querySelector('.wechat-card.compact .qr-placeholder');
    
    if (wechatBtn && qrPlaceholder) {
        wechatBtn.addEventListener('click', function() {
            // 模拟二维码点击效果
            qrPlaceholder.style.borderColor = 'var(--accent-color)';
            qrPlaceholder.style.color = 'var(--accent-color)';
            qrPlaceholder.style.transform = 'scale(1.05)';
            
            // 显示提示信息
            const originalText = qrPlaceholder.querySelector('span').textContent;
            qrPlaceholder.querySelector('span').textContent = '请使用微信扫码关注';
            
            // 3秒后恢复
            setTimeout(() => {
                qrPlaceholder.style.borderColor = '';
                qrPlaceholder.style.color = '';
                qrPlaceholder.style.transform = '';
                qrPlaceholder.querySelector('span').textContent = originalText;
            }, 3000);
            
            // 按钮反馈效果
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 200);
        });
    }
}

// ===== 社交链接悬停效果增强 =====
function initSocialLinks() {
    const socialLinks = document.querySelectorAll('.social-link');
    
    socialLinks.forEach(link => {
        link.addEventListener('mouseenter', function() {
            const icon = this.querySelector('i');
            if (icon) {
                icon.style.transform = 'rotate(10deg) scale(1.2)';
                icon.style.transition = 'transform 0.3s ease';
            }
        });
        
        link.addEventListener('mouseleave', function() {
            const icon = this.querySelector('i');
            if (icon) {
                icon.style.transform = '';
            }
        });
    });
}

// 初始化社交链接效果
initSocialLinks();

// ===== 页面加载动画 =====
window.addEventListener('load', function() {
    // 添加页面加载完成类
    document.body.classList.add('loaded');
    
    // 轮播图入场动画
    const carousel = document.querySelector('.carousel');
    if (carousel) {
        setTimeout(() => {
            carousel.style.opacity = '1';
            carousel.style.transform = 'translateY(0)';
        }, 300);
    }
    
    // 初始设置
    if (carousel) {
        carousel.style.opacity = '0';
        carousel.style.transform = 'translateY(20px)';
        carousel.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
    }
});

// ===== 滚动动画 =====
function initScrollAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
            }
        });
    }, observerOptions);
    
    // 观察需要动画的元素
    const animatedElements = document.querySelectorAll('.about-content, .wechat-card');
    animatedElements.forEach(el => {
        el.classList.add('animate-on-scroll');
        observer.observe(el);
    });
}

// 初始化滚动动画
initScrollAnimations();