webs/驭鑫/new yxsilicon/js/index.js

document.addEventListener('DOMContentLoaded', function () {
    /** 主营业务下拉菜单与遮罩层交互 */
    // const dropdown = document.querySelector('.nav-dropdown');
    // const mask = document.querySelector('.dropdown-mask');
    // const navLink = dropdown?.querySelector('.nav-link');

    // if (dropdown || mask || navLink) {
    //     const handleToggleDropdown = (e) => {
    //         e.preventDefault();
    //         const isOpen = dropdown.classList.contains('open');
    //         if (isOpen) {
    //             dropdown.classList.remove('open');
    //             dropdown.setAttribute('aria-expanded', 'false');
    //             mask.classList.remove('active');
    //         } else {
    //             dropdown.classList.add('open');
    //             dropdown.setAttribute('aria-expanded', 'true');
    //             mask.classList.add('active');
    //         }
    //     };

    //     const handleCloseDropdown = () => {
    //         dropdown.classList.remove('open');
    //         dropdown.setAttribute('aria-expanded', 'false');
    //         mask.classList.remove('active');
    //     };

    //     // 点击“主营业务”切换下拉
    //     navLink.addEventListener('click', handleToggleDropdown);

    //     // 遮罩层点击关闭
    //     mask.addEventListener('click', handleCloseDropdown);

    //     // 键盘无障碍支持（Enter/Space）
    //     dropdown.addEventListener('keydown', (e) => {
    //         if (e.key === 'Enter' || e.key === ' ') {
    //             e.preventDefault();
    //             handleToggleDropdown(e);
    //         }
    //         if (e.key === 'Escape') {
    //             handleCloseDropdown();
    //         }
    //     });

    // }



    // /** 下拉菜单箭头hover切换图片 */
    // const dropdownMenuItems = document.querySelectorAll('.dropdown-menu li');
    // if (dropdownMenuItems.length) {
    //     dropdownMenuItems.forEach((li) => {
    //         li.addEventListener('mouseenter', () => {
    //             const img = li.querySelector('.dropdown-item img');
    //             if (img) img.src = './imgs/home/arrow.svg';
    //         });
    //         li.addEventListener('mouseleave', () => {
    //             const img = li.querySelector('.dropdown-item img');
    //             if (img) img.src = './imgs/home/arrow2.svg';
    //         });
    //     });
    // }



    /** 关于驭鑫箭头hover切换图片 */
    const aboutArrow = document.querySelector('.about-us-arrow img');
    const aboutArrowBox = document.querySelector('.about-us-arrow');
    if (aboutArrow || aboutArrowBox) {
        aboutArrowBox.addEventListener('click', () => {
            window.location.href = './html/aboutYuxin.html';
        });
        aboutArrowBox.addEventListener('mouseenter', () => {
            aboutArrow.src = './imgs/home/arrow.svg';
        });
        aboutArrowBox.addEventListener('mouseleave', () => {
            aboutArrow.src = './imgs/home/arrow2.svg';
        });
    }


    // arrowBox hover 切换图片和背景
    const arrowBox = document.querySelector('.arrowBox');
    const arrowImg = arrowBox?.querySelector('img');
    if (arrowBox && arrowImg) {
        arrowBox.addEventListener('mouseenter', () => {
            arrowImg.src = './imgs/home/arrow.svg';
        });
        arrowBox.addEventListener('mouseleave', () => {
            arrowImg.src = './imgs/home/arrow2.svg';
        });
    }

    // ------------------------芯片代理区滚动图区--------------------------------
    const container = document.querySelector('.brand-carousel-container');
    const list = document.querySelector('.brand-carousel-list');
    const btnLeft = document.querySelector('.brand-btn.left');
    const btnRight = document.querySelector('.brand-btn.right');

    if (container && list) {
        const clone = list.cloneNode(true);
        clone.classList.add('brand-carousel-list-clone');
        list.parentNode.appendChild(clone);

        list.style.display = 'inline-flex';
        clone.style.display = 'inline-flex';
        container.style.whiteSpace = 'nowrap';

        let scrollSpeed = 1; // 调整为你想要的速度
        let isHovering = false;
        let pauseTimer = null;

        // 鼠标悬停暂停
        container.addEventListener('mouseenter', () => { isHovering = true; });
        container.addEventListener('mouseleave', () => { isHovering = false; });

        function loopScroll() {
            if (!isHovering) {
                if (container.scrollLeft >= list.scrollWidth) {
                    container.scrollLeft -= list.scrollWidth;
                } else {
                    container.scrollLeft += scrollSpeed;
                }
            }
            requestAnimationFrame(loopScroll);
        }
        loopScroll();

        function getItemWidth() {
            const item = list.querySelector('.brand-item');
            if (!item) return 200;
            const style = getComputedStyle(item);
            return item.offsetWidth + parseFloat(style.marginLeft || 0) + parseFloat(style.marginRight || 0);
        }

        function scrollByStep(step) {
            // 暂停自动滚动一小段时间
            isHovering = true;
            if (pauseTimer) clearTimeout(pauseTimer);
            pauseTimer = setTimeout(() => { isHovering = false; }, 1500);

            let target = container.scrollLeft + step * getItemWidth();
            if (target < 0) {
                target = list.scrollWidth + target;
            }
            if (target >= list.scrollWidth) {
                target = target - list.scrollWidth;
            }
            container.scrollTo({ left: target, behavior: 'smooth' });
        }

        if (btnLeft) {
            btnLeft.addEventListener('click', () => {
                scrollByStep(-1);
            });
        }
        if (btnRight) {
            btnRight.addEventListener('click', () => {
                scrollByStep(1);
            });
        }
    }


    // -----------------------------电子产品设计生产制造服务区卡片轮播--------------------------------
    const cardContainer = document.querySelector('.card-carousel-container');
    const cardList = document.querySelector('.card-carousel-list');
    
    if (cardContainer && cardList) {
        // 克隆列表实现无缝滚动
        const clone = cardList.cloneNode(true);
        clone.classList.add('card-carousel-list-clone');
        cardList.parentNode.appendChild(clone);
    
        // 设置样式
        cardList.style.display = 'inline-flex';
        clone.style.display = 'inline-flex';
        cardContainer.style.whiteSpace = 'nowrap';
    
        let scrollSpeed = 1; // 增加滚动速度
        let isHovering = false;
    
        // 鼠标悬停暂停
        cardContainer.addEventListener('mouseenter', () => { 
            console.log('Mouse enter - pausing scroll');
            isHovering = true; 
        });
        cardContainer.addEventListener('mouseleave', () => { 
            console.log('Mouse leave - resuming scroll');
            isHovering = false; 
        });
    
        function loopScroll() {
            if (!isHovering) {
                if (cardContainer.scrollLeft >= cardList.scrollWidth) {
                    console.log('Resetting scroll position');
                    cardContainer.scrollLeft = 0;
                } else {
                    cardContainer.scrollLeft += scrollSpeed;
                }
            }
            requestAnimationFrame(loopScroll);
        }
    
        // 启动滚动
        console.log('Starting scroll animation');
        loopScroll();
    
        // 调试信息
        console.log('Container width:', cardContainer.offsetWidth);
        console.log('List width:', cardList.scrollWidth);
        console.log('Clone width:', clone.scrollWidth);
        console.log('Initial scroll position:', cardContainer.scrollLeft);
    }

});