webs/驭鑫/new 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 itemWidth = getItemWidth();
            const visibleItems = Math.floor(container.offsetWidth / itemWidth);
            const count = 3; // 每次滑动3个
            
            // 计算新的滚动位置，确保完整项目显示
            let target = Math.round(container.scrollLeft / itemWidth) * itemWidth;
            target += step * count * itemWidth;
            
            // 限制滚动范围
            if (target < 0) target = 0;
            const maxScrollPosition = list.scrollWidth - container.offsetWidth + 
                                     (container.offsetWidth % itemWidth); // 调整
            if (target > maxScrollPosition) target = maxScrollPosition;
        
            // 滚动到指定位置
            container.scrollTo({ 
                left: target, 
                behavior: 'smooth'
            });
            
            // 调试信息
            console.log('Item width:', itemWidth);
            console.log('Visible items:', visibleItems);
            console.log('Scrolling to position:', target);
        }
    
        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]');
});