驭鑫网站重写 new yxsilicon

驭鑫/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; }

驭鑫/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 items = list.querySelectorAll('.brand-item');
-            const visibleItems = Math.floor(container.offsetWidth / itemWidth);
+            if (items.length === 0) return;
-            const count = 3; // 每次滑动3个
+
-            
+            // 动态计算每个项目的宽度（包括margin）
-            // 计算新的滚动位置，确保完整项目显示
+            const itemWidths = Array.from(items).map(item => {
-            let target = Math.round(container.scrollLeft / itemWidth) * itemWidth;
+                const style = getComputedStyle(item);
-            target += step * count * itemWidth;
+                return item.offsetWidth + parseFloat(style.marginRight || 0);
-            
+            });
-            // 限制滚动范围
+
-            if (target < 0) target = 0;
+            // 计算当前第一个完整显示的项目的索引
-            const maxScrollPosition = list.scrollWidth - container.offsetWidth + 
+            let currentScroll = container.scrollLeft;
-                                     (container.offsetWidth % itemWidth); // 调整
+            let currentIndex = 0;
-            if (target > maxScrollPosition) target = maxScrollPosition;
+            let accumulatedWidth = 0;
-        
+
-            // 滚动到指定位置
+            for (let i = 0; i < itemWidths.length; i++) {
-            container.scrollTo({ 
+                accumulatedWidth += itemWidths[i];
-                left: target, 
+                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 => {
+    document.querySelectorAll('.service-case-link').forEach(link => {
-        link.addEventListener('click', function(e) {
+        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();
+            // 传递 index 和 scroll 标记
             window.name = this.dataset.index + '|scroll';
             window.location.href = this.href;
-          });
         });
-      }
+    });
 
-        // 绑定banner箭头跳转
+    //   -------绑定banner箭头跳转--------------
-  handleCaseJump('.arrowBox[data-index]');
+    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]');
 });