yxsilicon/js/index.js

document.addEventListener('DOMContentLoaded', function () {




    /** 关于驭鑫箭头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();

        // 动态获取单个brand-item的宽度（含margin）
        function getItemWidth() {
            const item = list.querySelector('.brand-item');
            if (!item) return 200;
            const style = getComputedStyle(item);
            // 只加margin-right，因为只有右间隔
            return item.offsetWidth + parseFloat(style.marginRight || 0);
        }

        // 修改后的滚动逻辑
        function scrollByStep(step) {
            isHovering = true;
            if (pauseTimer) clearTimeout(pauseTimer);
            pauseTimer = setTimeout(() => { isHovering = false; }, 1500);

            const items = list.querySelectorAll('.brand-item');
            if (items.length === 0) return;

            // 动态计算每个项目的宽度（包括margin）
            const itemWidths = Array.from(items).map(item => {
                const style = getComputedStyle(item);
                return item.offsetWidth + parseFloat(style.marginRight || 0);
            });

            // 计算当前第一个完整显示的项目的索引
            let currentScroll = container.scrollLeft;
            let currentIndex = 0;
            let accumulatedWidth = 0;

            for (let i = 0; i < itemWidths.length; i++) {
                accumulatedWidth += itemWidths[i];
                if (accumulatedWidth > currentScroll) {
                    currentIndex = i;
                    break;
                }
            }

            // 计算目标索引，每次滑动3个项目
            let targetIndex = currentIndex + step * 3;
            targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));

            // 计算目标滚动位置
            let targetScroll = 0;
            for (let i = 0; i < targetIndex; i++) {
                targetScroll += itemWidths[i];
            }

            // 限制最大滚动距离
            const maxScroll = list.scrollWidth - container.offsetWidth;
            targetScroll = Math.min(targetScroll, maxScroll);

            // 应用滚动
            container.scrollTo({
                left: targetScroll,
                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);


    }



    // -----------------------点击跳转服务案例页面对应项目--------------------------------
    document.querySelectorAll('.service-case-link').forEach(link => {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            // 传递 index 和 scroll 标记
            window.name = this.dataset.index + '|scroll';
            window.location.href = this.href;
        });
    });

    //   -------绑定banner箭头跳转--------------
    function handleCaseJump(selector) {
        document.querySelectorAll(selector).forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                window.name = this.dataset.index + '|scroll';
                window.location.href = this.href;
            });
        });
    }

    // 绑定banner箭头跳转
    handleCaseJump('.arrowBox[data-index]');
});