From b4428e08dfdd97e27e9b990720921750e400651e Mon Sep 17 00:00:00 2001 From: yaoqin <497681109@qq.com> Date: Thu, 22 May 2025 11:22:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A9=AD=E9=91=AB=E7=BD=91=E7=AB=99=E9=87=8D?= =?UTF-8?q?=E5=86=99=20new=20yxsilicon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 驭鑫/new yxsilicon/css/index.css | 10 +- 驭鑫/new yxsilicon/js/index.js | 141 ++++++++++++++++------------- 2 files changed, 87 insertions(+), 64 deletions(-) diff --git a/驭鑫/new yxsilicon/css/index.css b/驭鑫/new yxsilicon/css/index.css index f9d6b70..add4ead 100644 --- a/驭鑫/new yxsilicon/css/index.css +++ b/驭鑫/new yxsilicon/css/index.css @@ -230,7 +230,7 @@ body{ box-shadow: 0 4px 24px rgba(54,198,240,0.10); display: flex; align-items: center; - padding: 0 0; + padding: 0; overflow: hidden; background: linear-gradient( 90deg, @@ -246,9 +246,11 @@ body{ overflow-x: hidden; white-space: nowrap; flex: 1; - padding: 1vw 3vw; /* 左右各加3vw，保证两侧有足够空间 */ scrollbar-width: none; -ms-overflow-style: none; + /* 稍微增加边距，确保不被按钮遮挡 */ + padding-left: 2vw; + padding-right: 2vw; } .brand-carousel-container::-webkit-scrollbar { display: none; @@ -291,8 +293,9 @@ body{ position: absolute; top: 50%; transform: translateY(-50%); - z-index: 2; + z-index: 5; width: 2vw; + min-width: 32px; height: 100%; border: none; background: #fff; @@ -307,6 +310,7 @@ body{ margin-left: 0; color: #00A0D2; text-align: center; + background: rgba(255,255,255,0.9); /* 半透明背景 */ } .brand-btn.left { left: 0px; } .brand-btn.right { right: 0px; } diff --git a/驭鑫/new yxsilicon/js/index.js b/驭鑫/new yxsilicon/js/index.js index de5de46..e58a765 100644 --- a/驭鑫/new yxsilicon/js/index.js +++ b/驭鑫/new yxsilicon/js/index.js @@ -1,5 +1,5 @@ document.addEventListener('DOMContentLoaded', function () { - + @@ -41,18 +41,18 @@ document.addEventListener('DOMContentLoaded', function () { 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) { @@ -64,47 +64,66 @@ document.addEventListener('DOMContentLoaded', function () { requestAnimationFrame(loopScroll); } loopScroll(); - + // 动态获取单个brand-item的宽度（含margin） function getItemWidth() { const item = list.querySelector('.brand-item'); if (!item) return 200; const style = getComputedStyle(item); - // 只加margin-right，因为你只有右间隔 + // 只加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, + + 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' }); - - // 调试信息 - console.log('Item width:', itemWidth); - console.log('Visible items:', visibleItems); - console.log('Scrolling to position:', target); } - + + // 绑定左右按钮事件 if (btnLeft) { btnLeft.addEventListener('click', () => { scrollByStep(-1); @@ -121,31 +140,31 @@ document.addEventListener('DOMContentLoaded', function () { // -----------------------------电子产品设计生产制造服务区卡片轮播-------------------------------- 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', () => { + cardContainer.addEventListener('mouseenter', () => { console.log('Mouse enter - pausing scroll'); - isHovering = true; + isHovering = true; }); - cardContainer.addEventListener('mouseleave', () => { + cardContainer.addEventListener('mouseleave', () => { console.log('Mouse leave - resuming scroll'); - isHovering = false; + isHovering = false; }); - + function loopScroll() { if (!isHovering) { if (cardContainer.scrollLeft >= cardList.scrollWidth) { @@ -157,11 +176,11 @@ document.addEventListener('DOMContentLoaded', function () { } requestAnimationFrame(loopScroll); } - + // 启动滚动 console.log('Starting scroll animation'); loopScroll(); - + // 调试信息 console.log('Container width:', cardContainer.offsetWidth); console.log('List width:', cardList.scrollWidth); @@ -173,27 +192,27 @@ document.addEventListener('DOMContentLoaded', function () { - // -----------------------点击跳转服务案例页面对应项目-------------------------------- - 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) { + // -----------------------点击跳转服务案例页面对应项目-------------------------------- + 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箭头跳转 - handleCaseJump('.arrowBox[data-index]'); + // -------绑定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]'); }); \ No newline at end of file