official-website-china/wp-content/themes/nenghui-energy-theme-cn/assets/js/professional-fields.js

/**
 * 专业领域轮播初始化
 * 使用 SimpleCarousel 实现一行5个卡片的轮播效果
 */

(function() {
    'use strict';

    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        initProfessionalCarousel();
    });

    function initProfessionalCarousel() {
        const carouselContainer = document.getElementById('professionalCarousel');
        if (!carouselContainer) {
            console.warn('Professional carousel container not found');
            return;
        }

        // 检查SimpleCarousel是否可用
        if (typeof SimpleCarousel === 'undefined') {
            console.error('SimpleCarousel is not loaded');
            return;
        }

        // 轮播配置
        const carouselOptions = {
            autoplay: true,
            autoplayDelay: 4000,
            loop: true,
            navigation: true,
            pagination: false,
            touchEnabled: true,
            slidesPerView: 5, // 一行显示5个卡片
            spaceBetween: 20,
            onSlideChange: function(currentIndex, previousIndex) {
                // 轮播切换时的回调
                console.log('Slide changed from', previousIndex, 'to', currentIndex);
                
                // 添加切换动画效果
                animateSlideChange(currentIndex, previousIndex);
            }
        };

        // 初始化轮播
        const carousel = new SimpleCarousel(carouselContainer, carouselOptions);
        
        // 存储轮播实例到全局，便于调试
        window.professionalCarousel = carousel;

        // 添加键盘导航支持
        addKeyboardNavigation(carousel);
        
        // 添加鼠标悬停暂停功能
        addHoverPause(carousel, carouselContainer);
        
        // 添加加载完成动画
        addLoadAnimation(carouselContainer);
        
        console.log('Professional carousel initialized successfully');
    }

    /**
     * 添加轮播切换动画效果
     */
    function animateSlideChange(currentIndex, previousIndex) {
        const cards = document.querySelectorAll('.professional-card');
        
        // 为当前显示的卡片添加动画
        cards.forEach((card, index) => {
            card.classList.remove('slide-in', 'slide-out');
            
            // 计算当前显示的卡片范围（一行5个）
            const startIndex = Math.floor(currentIndex / 5) * 5;
            const endIndex = startIndex + 4;
            
            if (index >= startIndex && index <= endIndex) {
                // 当前显示的卡片
                setTimeout(() => {
                    card.classList.add('slide-in');
                }, (index - startIndex) * 100); // 错开动画时间
            }
        });
    }

    /**
     * 添加键盘导航支持
     */
    function addKeyboardNavigation(carousel) {
        document.addEventListener('keydown', function(e) {
            // 只在轮播容器可见时响应键盘事件
            const carouselContainer = document.getElementById('professionalCarousel');
            if (!isElementInViewport(carouselContainer)) {
                return;
            }

            switch(e.key) {
                case 'ArrowLeft':
                    e.preventDefault();
                    carousel.prev();
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    carousel.next();
                    break;
            }
        });
    }

    /**
     * 添加鼠标悬停暂停功能
     */
    function addHoverPause(carousel, container) {
        container.addEventListener('mouseenter', function() {
            carousel.pauseAutoplay();
        });

        container.addEventListener('mouseleave', function() {
            carousel.resumeAutoplay();
        });
    }

    /**
     * 添加加载完成动画
     */
    function addLoadAnimation(container) {
        // 添加加载状态
        container.classList.add('loading');
        
        // 模拟加载完成
        setTimeout(() => {
            container.classList.remove('loading');
            container.classList.add('loaded');
        }, 500);
    }

    /**
     * 检查元素是否在视口中
     */
    function isElementInViewport(el) {
        if (!el) return false;
        
        const rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    /**
     * 响应式处理
     */
    function handleResponsive() {
        const carousel = window.professionalCarousel;
        if (!carousel) return;

        const screenWidth = window.innerWidth;
        let slidesPerView = 5;

        if (screenWidth <= 480) {
            slidesPerView = 2;
        } else if (screenWidth <= 768) {
            slidesPerView = 3;
        } else if (screenWidth <= 1024) {
            slidesPerView = 4;
        }

        // 更新轮播配置（如果SimpleCarousel支持动态更新）
        if (carousel.updateSlidesPerView) {
            carousel.updateSlidesPerView(slidesPerView);
        }
    }

    // 监听窗口大小变化
    window.addEventListener('resize', debounce(handleResponsive, 250));

    /**
     * 防抖函数
     */
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

})();