diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html index e453835d..19157c94 100644 --- a/app/index/view/pc/topic_laptop/index.html +++ b/app/index/view/pc/topic_laptop/index.html @@ -66,18 +66,18 @@ {else/}
{volist name="data.top_focus_images" id="tfi"} -
-
{$tfi.title}
-
{$tfi.desc||raw|htmlspecialchars_decode}
-
- - - +
+
+
{$tfi.title}
+
{$tfi.desc||raw|htmlspecialchars_decode}
+
+ + + +
+ {$tfi.title}
- - {$tfi.title} - {/volist}
{/eq} @@ -87,35 +87,35 @@
- {notempty name="data.perf.0"}{$data.perf.0.title}{/notempty} + {notempty name="data.perf.0"}{$data.perf.0.title}{/notempty}
-
{notempty name="data.perf.1"}{$data.perf.1.title}{/notempty}
-
{notempty name="data.perf.2"}{$data.perf.2.title}{/notempty}
+
{notempty name="data.perf.1"}{$data.perf.1.title}{/notempty}
+
{notempty name="data.perf.2"}{$data.perf.2.title}{/notempty}
- {notempty name="data.perf.3"}{$data.perf.3.title}{/notempty} + {notempty name="data.perf.3"}{$data.perf.3.title}{/notempty}
- {notempty name="data.perf.4"}{$data.perf.4.title}{/notempty} + {notempty name="data.perf.4"}{$data.perf.4.title}{/notempty}
- {notempty name="data.perf.5"}{$data.perf.5.title}{/notempty} + {notempty name="data.perf.5"}{$data.perf.5.title}{/notempty}
- {notempty name="data.perf.6"}{$data.perf.6.title}{/notempty} + {notempty name="data.perf.6"}{$data.perf.6.title}{/notempty}
- {notempty name="data.perf.7"}{$data.perf.7.title}{/notempty} - {notempty name="data.perf.8"}{$data.perf.8.title}{/notempty} + {notempty name="data.perf.7"}{$data.perf.7.title}{/notempty} + {notempty name="data.perf.8"}{$data.perf.8.title}{/notempty}
- {notempty name="data.perf.9"}{$data.perf.9.title}{/notempty} + {notempty name="data.perf.9"}{$data.perf.9.title}{/notempty}
@@ -129,7 +129,7 @@
{volist name="data.cpu" id="co"} - {$co.title} + {$co.title} {/volist}
@@ -206,19 +206,19 @@ {eq name=":cookie('think_lang')" value="en-us"}
{$gpu_first_section.short_title|default=''|raw}
- +
{else/}
{$gpu_first_section.short_title|default=''|raw}
- +
{/eq}
{volist name="data.gpu" id="go"} - + {/volist}
@@ -305,7 +305,7 @@ {/eq}
{volist name="data.hard_drive" id="ho"} - + {/volist}
@@ -322,7 +322,7 @@ {/notempty}
{notempty name="data.cooling_system.0"} - +
@@ -368,13 +368,13 @@ {eq name=":cookie('think_lang')" value="en-us"}
{volist name="data.screen_soft_light" id="so"} - + {/volist}
{else/}
{volist name="data.screen_soft_light" id="so"} - + {/volist}
{/eq} @@ -394,7 +394,7 @@ {/notempty}
{volist name="data.screen_color_gamut" id="so"} - + {/volist}
@@ -410,10 +410,10 @@ {/notempty}
{assign name="anti_glare_left" value=":array_shift($data.screen_anti_glare)"/} - +
{assign name="anti_glare_right" value=":array_shift($data.screen_anti_glare)"/} - +
@@ -429,7 +429,7 @@
{volist name="data.exterior_texture" id="eo"} - {$eo.title} + {$eo.title} {/volist}
@@ -446,7 +446,7 @@
{volist name="data.network_card" id="no"} - + {/volist}
@@ -460,7 +460,7 @@
{volist name="data.battery_life" id="bo"} - + {/volist}
{$battery_life_first.desc|default=''|raw}
@@ -472,7 +472,7 @@

{:lang_i18n("标配多种接口，会议室连接电脑、U盘传输文件、TF卡读取等，全都轻松搞定")}

- 接口图 + 接口图
{:lang_i18n('肯辛通锁孔')}
{:lang_i18n('千兆网口')}
@@ -489,22 +489,22 @@
- 左箭头 + 左箭头
{volist name="data.scene_focus_images" id="so"} - {$so.title} + {$so.title} {/volist}
- 右箭头 + 右箭头
{volist name="data.scene_focus_images" id="so"} -
+
{eq name=":cookie('think_lang')" value="en-us"}
{$so.title}
{$so.short_title}
@@ -527,7 +527,7 @@ {notempty name="camare_microphone"}
- {$camare_microphone.title} + {$camare_microphone.title}
{/notempty} @@ -564,7 +564,7 @@
{volist name="data.product_testing" id="po"} - {$po.title} + {$po.title} {/volist}
@@ -1356,8 +1356,110 @@ }); +// document.addEventListener('DOMContentLoaded', () => { +// // 1. 获取元素（匹配你的结构） +// const carouselImgs = document.querySelector('.carousel-imgs'); +// const imgItems = document.querySelectorAll('.carousel-img'); +// const leftArrow = document.querySelector('.arrow-left'); +// const rightArrow = document.querySelector('.arrow-right'); +// const textItems = document.querySelectorAll('.carousel-text'); +// const carouselContainer = document.querySelector('.carousel-container'); + +// // 容错处理 +// if (!carouselImgs || imgItems.length === 0) { +// console.warn('轮播图片为空，初始化终止'); +// return; +// } + +// // 2. 核心变量（仅索引，无尺寸计算） +// const imgCount = imgItems.length; +// let currentIndex = 0; +// let autoPlayTimer = null; +// let isResizing = false; // 缩放锁，避免重复触发 + +// // 3. 切换到指定索引（核心：百分比偏移，无尺寸计算） +// const goToIndex = (index) => { +// // 边界处理 +// if (index < 0) index = imgCount - 1; +// if (index >= imgCount) index = 0; + +// // 关键：用百分比偏移，彻底避开rem/px计算误差 +// carouselImgs.style.transform = `translateX(-${index * 100}%)`; +// currentIndex = index; + +// // 更新文字激活态 +// textItems.forEach((item, idx) => { +// item.classList.toggle('active', idx === currentIndex); +// }); +// }; + +// // 4. 左右切换逻辑 +// const slideNext = () => goToIndex(currentIndex + 1); +// const slidePrev = () => goToIndex(currentIndex - 1); + +// // 5. 自动播放逻辑 +// const autoPlay = () => { +// clearInterval(autoPlayTimer); +// autoPlayTimer = setInterval(slideNext, 3000); // 3秒切换，可改 +// }; + +// // 6. 绑定事件 +// // 箭头点击 +// leftArrow?.addEventListener('click', () => { +// slidePrev(); +// autoPlay(); // 点击后重启自动播放 +// }); +// rightArrow?.addEventListener('click', () => { +// slideNext(); +// autoPlay(); +// }); + +// // 文字指示器点击 +// textItems.forEach((item, idx) => { +// item.addEventListener('click', () => { +// goToIndex(idx); +// autoPlay(); +// }); +// }); + +// // 鼠标悬停暂停 +// carouselContainer?.addEventListener('mouseenter', () => { +// clearInterval(autoPlayTimer); +// }); +// carouselContainer?.addEventListener('mouseleave', autoPlay); + +// // 7. 窗口缩放响应（核心：仅重新定位，无计算） +// const handleResize = () => { +// if (isResizing) return; +// isResizing = true; + +// // 缩放时直接重新定位当前索引（百分比偏移无需计算） +// goToIndex(currentIndex); + +// // 解锁 +// setTimeout(() => { +// isResizing = false; +// }, 100); +// }; + +// // 防抖监听窗口缩放 +// let resizeTimer; +// window.addEventListener('resize', () => { +// clearTimeout(resizeTimer); +// resizeTimer = setTimeout(handleResize, 150); +// }); + +// // 8. 初始化 +// goToIndex(0); // 初始定位到第一张 +// autoPlay(); // 启动自动播放 + +// // 9. 页面卸载清理定时器 +// window.addEventListener('beforeunload', () => { +// clearInterval(autoPlayTimer); +// }); +// }); document.addEventListener('DOMContentLoaded', () => { - // 1. 获取元素（匹配你的结构） + // 1. 获取元素 const carouselImgs = document.querySelector('.carousel-imgs'); const imgItems = document.querySelectorAll('.carousel-img'); const leftArrow = document.querySelector('.arrow-left'); @@ -1371,87 +1473,142 @@ document.addEventListener('DOMContentLoaded', () => { return; } - // 2. 核心变量（仅索引，无尺寸计算） - const imgCount = imgItems.length; - let currentIndex = 0; + // 2. 核心配置 + const imgCount = imgItems.length; // 真实图片数量（如3张：1/2/3） + let currentRealIndex = 0; // 真实图片索引（0=1, 1=2, 2=3） + let isTransitioning = false; // 过渡锁，防止动画冲突 + const transitionDuration = 500; // 过渡时长(ms)，需与CSS一致 let autoPlayTimer = null; - let isResizing = false; // 缩放锁，避免重复触发 - // 3. 切换到指定索引（核心：百分比偏移，无尺寸计算） - const goToIndex = (index) => { - // 边界处理 - if (index < 0) index = imgCount - 1; - if (index >= imgCount) index = 0; + // 3. 初始化无缝DOM：仅复制第一张到末尾（适配3→1右侧滑入） + const initSeamless = () => { + // 复制第一张图片（1）到轮播容器末尾 + const firstImgCopy = imgItems[0].cloneNode(true); + carouselImgs.appendChild(firstImgCopy); + // 初始定位：无过渡，显示真实第一张 + carouselImgs.style.transition = 'none'; + carouselImgs.style.transform = `translateX(0%)`; + void carouselImgs.offsetWidth; // 强制重绘 + // 开启过渡 + carouselImgs.style.transition = `transform ${transitionDuration}ms ease`; + }; + initSeamless(); - // 关键：用百分比偏移，彻底避开rem/px计算误差 - carouselImgs.style.transform = `translateX(-${index * 100}%)`; - currentIndex = index; + // 4. 核心切换函数（保证3→1时1从右侧滑入） + const slideToNext = () => { + if (isTransitioning) return; + isTransitioning = true; - // 更新文字激活态 - textItems.forEach((item, idx) => { - item.classList.toggle('active', idx === currentIndex); - }); + // 步骤1：计算目标偏移，执行滑动动画 + const targetTranslateX = -(currentRealIndex + 1) * 100; + carouselImgs.style.transform = `translateX(${targetTranslateX}%)`; + + // 步骤2：监听过渡结束，处理无缝逻辑 + const handleEnd = () => { + carouselImgs.removeEventListener('transitionend', handleEnd); + isTransitioning = false; + + // 如果滑到了复制的第一张（3→1的视觉终点） + if (currentRealIndex === imgCount - 1) { + // 瞬间切回真实第一张（无过渡，用户无感知） + carouselImgs.style.transition = 'none'; + carouselImgs.style.transform = `translateX(0%)`; + void carouselImgs.offsetWidth; + carouselImgs.style.transition = `transform ${transitionDuration}ms ease`; + currentRealIndex = 0; // 重置为真实第一张 + } else { + currentRealIndex += 1; // 正常切换，索引+1 + } + + // 更新文字指示器激活态 + textItems.forEach((item, idx) => { + item.classList.toggle('active', idx === currentRealIndex); + }); + }; + carouselImgs.addEventListener('transitionend', handleEnd); }; - // 4. 左右切换逻辑 - const slideNext = () => goToIndex(currentIndex + 1); - const slidePrev = () => goToIndex(currentIndex - 1); + // 5. 反向切换（1→3，可选保留） + const slideToPrev = () => { + if (isTransitioning) return; + isTransitioning = true; - // 5. 自动播放逻辑 + // 1→3时，先瞬间切到复制的3位置，再滑入 + if (currentRealIndex === 0) { + carouselImgs.style.transition = 'none'; + carouselImgs.style.transform = `translateX(-${imgCount * 100}%)`; + void carouselImgs.offsetWidth; + carouselImgs.style.transition = `transform ${transitionDuration}ms ease`; + currentRealIndex = imgCount - 1; + } + + const targetTranslateX = -currentRealIndex * 100; + carouselImgs.style.transform = `translateX(${targetTranslateX}%)`; + + const handleEnd = () => { + carouselImgs.removeEventListener('transitionend', handleEnd); + isTransitioning = false; + // 更新文字指示器 + textItems.forEach((item, idx) => { + item.classList.toggle('active', idx === currentRealIndex); + }); + }; + carouselImgs.addEventListener('transitionend', handleEnd); + }; + + // 6. 自动播放：严格1→2→3→1循环 const autoPlay = () => { clearInterval(autoPlayTimer); - autoPlayTimer = setInterval(slideNext, 3000); // 3秒切换，可改 + autoPlayTimer = setInterval(() => { + if (!isTransitioning) slideToNext(); + }, 3000); // 3秒切换一次，可调整 }; - // 6. 绑定事件 - // 箭头点击 - leftArrow?.addEventListener('click', () => { - slidePrev(); + // 7. 事件绑定 + // 右箭头：下一张（核心，保证3→1右侧滑入） + rightArrow?.addEventListener('click', () => { + slideToNext(); autoPlay(); // 点击后重启自动播放 }); - rightArrow?.addEventListener('click', () => { - slideNext(); + // 左箭头：上一张（可选，如需取消可注释） + leftArrow?.addEventListener('click', () => { + slideToPrev(); autoPlay(); }); // 文字指示器点击 textItems.forEach((item, idx) => { item.addEventListener('click', () => { - goToIndex(idx); + if (isTransitioning || currentRealIndex === idx) return; + isTransitioning = true; + + // 直接滑到目标图片 + carouselImgs.style.transform = `translateX(-${idx * 100}%)`; + currentRealIndex = idx; + + // 过渡结束解锁 + const handleEnd = () => { + carouselImgs.removeEventListener('transitionend', handleEnd); + isTransitioning = false; + }; + carouselImgs.addEventListener('transitionend', handleEnd); + autoPlay(); }); }); - // 鼠标悬停暂停 + // 鼠标悬停暂停/恢复 carouselContainer?.addEventListener('mouseenter', () => { clearInterval(autoPlayTimer); }); carouselContainer?.addEventListener('mouseleave', autoPlay); - // 7. 窗口缩放响应（核心：仅重新定位，无计算） - const handleResize = () => { - if (isResizing) return; - isResizing = true; - - // 缩放时直接重新定位当前索引（百分比偏移无需计算） - goToIndex(currentIndex); - - // 解锁 - setTimeout(() => { - isResizing = false; - }, 100); - }; - - // 防抖监听窗口缩放 - let resizeTimer; - window.addEventListener('resize', () => { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(handleResize, 150); - }); - // 8. 初始化 - goToIndex(0); // 初始定位到第一张 - autoPlay(); // 启动自动播放 + // 激活第一个文字指示器 + textItems.forEach((item, idx) => { + item.classList.toggle('active', idx === 0); + }); + autoPlay(); // 启动自动播放 // 9. 页面卸载清理定时器 window.addEventListener('beforeunload', () => { diff --git a/public/static/index/pc/css/topic_laptop/index.css b/public/static/index/pc/css/topic_laptop/index.css index e8c5fe02..1f231ceb 100644 --- a/public/static/index/pc/css/topic_laptop/index.css +++ b/public/static/index/pc/css/topic_laptop/index.css @@ -34,8 +34,10 @@ body { will-change: opacity, transform; backface-visibility: hidden; perspective: 1000px; - transition: opacity 0.8s ease-out, transform 0.8s ease-out, - visibility 0.8s ease-out; + transition: + opacity 1.2s ease-in-out, + transform 1.2s ease-in-out, + visibility 1.2s ease-in-out; } /* 18-19号防卡顿：延迟19号动画 */ /* [data-order="19"] { diff --git a/public/static/index/pc/css/topic_laptop/lb.css b/public/static/index/pc/css/topic_laptop/lb.css index 7e28a541..a52960cf 100644 --- a/public/static/index/pc/css/topic_laptop/lb.css +++ b/public/static/index/pc/css/topic_laptop/lb.css @@ -85,7 +85,7 @@ } .carousel-arrow:hover { opacity: 1; - transform: translateY(-50%) scale(1.1); + /* transform: translateY(-50%) scale(1.1); */ box-shadow: 0 6px 20px rgba(0, 120, 255, 0.4); } .arrow-left {