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]'); });