驭鑫网站重写 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

@@ -70,41 +70,60 @@ document.addEventListener('DOMContentLoaded', function () {
             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个
+            const items = list.querySelectorAll('.brand-item');
+            if (items.length === 0) return;
 
-            // 计算新的滚动位置，确保完整项目显示
-            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'
+            // 动态计算每个项目的宽度（包括margin）
+            const itemWidths = Array.from(items).map(item => {
+                const style = getComputedStyle(item);
+                return item.offsetWidth + parseFloat(style.marginRight || 0);
             });
 
-            // 调试信息
-            console.log('Item width:', itemWidth);
-            console.log('Visible items:', visibleItems);
-            console.log('Scrolling to position:', target);
+            // 计算当前第一个完整显示的项目的索引
+            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);
@@ -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]');
 });