重构为左中右三栏卡片切换效果

- 中间显示主卡片，完整展示内容
- 左右两侧显示相邻卡片的部分预览（缩小85%，半透明）
- 切换时右侧卡片滑动到中间成为主卡片
- 同时中间卡片滑动到左侧成为预览
- 左侧卡片向左消失，新的右侧卡片从右边进入
- 所有卡片同步移动，形成流畅的轮播效果
- 动画时长0.6s，使用 cubic-bezier 缓动
- 保持自动播放和交互功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

css/index.css

@@ -2696,93 +2696,141 @@ html {
   display: none;
 }
 
-/* 下层：幻灯片容器 - 支持卡片堆叠视觉 */
+/* 下层：幻灯片容器 - 左中右三栏布局 */
 .solution-slider {
   position: relative;
   min-height: 450px;
-  perspective: 1000px;
+  perspective: 1500px;
-  padding-bottom: 30px;
+  overflow: visible;
 }
 
-/* 单个幻灯片 - 堆叠卡片效果 */
+/* 单个幻灯片 - 默认隐藏 */
 .solution-slide {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 50%;
   width: 100%;
   opacity: 0;
-  transform: translateX(-100%) scale(0.95);
+  transform: translateX(-50%) scale(0.7);
-  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
   z-index: 1;
 }
 
-/* 激活的幻灯片 */
+/* 中间激活的主卡片 */
 .solution-slide.active {
   position: relative;
+  left: 0;
   opacity: 1;
-  transform: translateX(0) translateY(0) scale(1);
+  transform: translateX(0) scale(1);
   pointer-events: auto;
   z-index: 10;
 }
 
-/* 后面的卡片 - 显示部分轮廓 */
+/* 左侧卡片 - 上一张的预览 */
-.solution-slide.stack-1 {
+.solution-slide.prev {
   position: absolute;
-  opacity: 0.6;
+  left: 0;
-  transform: translateX(0) translateY(10px) scale(0.98);
+  opacity: 0.5;
+  transform: translateX(-55%) scale(0.85);
   pointer-events: none;
-  z-index: 9;
+  z-index: 5;
-  filter: brightness(0.9);
-}
-
-.solution-slide.stack-2 {
-  position: absolute;
-  opacity: 0.4;
-  transform: translateX(0) translateY(20px) scale(0.96);
-  pointer-events: none;
-  z-index: 8;
-  filter: brightness(0.8);
-}
-
-.solution-slide.stack-3 {
-  position: absolute;
-  opacity: 0.2;
-  transform: translateX(0) translateY(30px) scale(0.94);
-  pointer-events: none;
-  z-index: 7;
   filter: brightness(0.7);
 }
 
-/* 即将离开的幻灯片 */
+/* 右侧卡片 - 下一张的预览 */
-.solution-slide.leaving {
+.solution-slide.next {
   position: absolute;
-  opacity: 1;
+  left: auto;
-  transform: translateX(0) scale(1);
+  right: 0;
-  z-index: 11;
+  opacity: 0.5;
-  animation: slideOutLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  transform: translateX(55%) scale(0.85);
+  pointer-events: none;
+  z-index: 5;
+  filter: brightness(0.7);
 }
 
-@keyframes slideOutLeft {
+/* 切换动画 - 从右到中 */
+.solution-slide.slide-to-center {
+  animation: slideFromRightToCenter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  z-index: 11;
+}
+
+@keyframes slideFromRightToCenter {
+  from {
+    left: auto;
+    right: 0;
+    opacity: 0.5;
+    transform: translateX(55%) scale(0.85);
+    filter: brightness(0.7);
+  }
   to {
-    transform: translateX(-120%) scale(0.9);
+    left: 0;
-    opacity: 0;
+    right: auto;
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: brightness(1);
   }
 }
 
-/* 即将进入的幻灯片 */
+/* 切换动画 - 从中到左 */
-.solution-slide.entering {
+.solution-slide.slide-to-left {
-  position: absolute;
+  animation: slideFromCenterToLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  opacity: 0;
+  z-index: 9;
-  transform: translateX(120%) scale(0.9);
-  z-index: 6;
-  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
-@keyframes slideInRight {
+@keyframes slideFromCenterToLeft {
-  to {
+  from {
-    transform: translateX(0) scale(1);
+    left: 0;
     opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: brightness(1);
+  }
+  to {
+    left: 0;
+    opacity: 0.5;
+    transform: translateX(-55%) scale(0.85);
+    filter: brightness(0.7);
+  }
+}
+
+/* 切换动画 - 从左消失 */
+.solution-slide.slide-out-left {
+  animation: slideOutToLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  z-index: 3;
+}
+
+@keyframes slideOutToLeft {
+  from {
+    left: 0;
+    opacity: 0.5;
+    transform: translateX(-55%) scale(0.85);
+  }
+  to {
+    left: 0;
+    opacity: 0;
+    transform: translateX(-80%) scale(0.7);
+  }
+}
+
+/* 切换动画 - 从右侧外进入到右侧位置 */
+.solution-slide.slide-in-right {
+  animation: slideInFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  z-index: 4;
+}
+
+@keyframes slideInFromRight {
+  from {
+    left: auto;
+    right: 0;
+    opacity: 0;
+    transform: translateX(80%) scale(0.7);
+  }
+  to {
+    left: auto;
+    right: 0;
+    opacity: 0.5;
+    transform: translateX(55%) scale(0.85);
   }
 }
 

js/index.js

@@ -272,29 +272,33 @@ $(function () {
     let isAnimating = false;
     const autoPlayDuration = 3000; // 3秒自动切换
 
-    // 更新所有幻灯片的堆叠状态
+    // 获取循环索引
-    function updateStackStates() {
+    function getCircularIndex(index) {
+      return ((index % totalSlides) + totalSlides) % totalSlides;
+    }
+
+    // 更新所有幻灯片的位置状态（左中右）
+    function updateSlidePositions() {
+      const prevIndex = getCircularIndex(currentIndex - 1);
+      const nextIndex = getCircularIndex(currentIndex + 1);
+
       $slides.each(function(index) {
         const $slide = $(this);
 
-        // 移除所有堆叠类
+        // 移除所有位置类
-        $slide.removeClass('stack-1 stack-2 stack-3');
+        $slide.removeClass('active prev next slide-to-center slide-to-left slide-out-left slide-in-right');
 
-        // 如果不是当前激活的，且不在动画中
+        if (index === currentIndex) {
-        if (index !== currentIndex && !$slide.hasClass('leaving') && !$slide.hasClass('entering')) {
+          // 中间主卡片
-          // 计算相对于当前索引的位置
+          $slide.addClass('active');
-          let offset = index - currentIndex;
+        } else if (index === prevIndex) {
-          if (offset < 0) offset += totalSlides;
+          // 左侧预览卡片
-
+          $slide.addClass('prev');
-          // 只显示后面3张卡片的堆叠效果
+        } else if (index === nextIndex) {
-          if (offset === 1) {
+          // 右侧预览卡片
-            $slide.addClass('stack-1');
+          $slide.addClass('next');
-          } else if (offset === 2) {
-            $slide.addClass('stack-2');
-          } else if (offset === 3) {
-            $slide.addClass('stack-3');
-          }
         }
+        // 其他卡片保持隐藏状态
       });
     }
 
@@ -304,40 +308,44 @@ $(function () {
 
       isAnimating = true;
 
-      const $currentSlide = $slides.eq(currentIndex);
+      const oldIndex = currentIndex;
-      const $nextSlide = $slides.eq(index);
+      const newIndex = index;
+      const prevOldIndex = getCircularIndex(oldIndex - 1);
+      const nextNewIndex = getCircularIndex(newIndex + 1);
 
-      // 移除所有动画类和堆叠类
+      // 移除所有动画类
-      $slides.removeClass('leaving entering stack-1 stack-2 stack-3');
+      $slides.removeClass('slide-to-center slide-to-left slide-out-left slide-in-right');
 
-      // 添加离开和进入动画
+      // 应用切换动画
-      $currentSlide.addClass('leaving');
+      // 右侧卡片 -> 中间
-      $nextSlide.addClass('entering');
+      $slides.eq(newIndex).removeClass('next').addClass('slide-to-center');
+
+      // 中间卡片 -> 左侧
+      $slides.eq(oldIndex).removeClass('active').addClass('slide-to-left');
+
+      // 左侧卡片 -> 消失
+      $slides.eq(prevOldIndex).removeClass('prev').addClass('slide-out-left');
+
+      // 新的右侧卡片进入
+      $slides.eq(nextNewIndex).addClass('slide-in-right');
 
       // 更新按钮
       $tabs.removeClass('active');
-      $tabs.eq(index).addClass('active');
+      $tabs.eq(newIndex).addClass('active');
 
-      // 等待动画完成
+      // 更新当前索引
-      setTimeout(function () {
+      currentIndex = newIndex;
-        // 移除旧的 active 类
-        $currentSlide.removeClass('active leaving');
-
-        // 添加新的 active 类
-        $nextSlide.addClass('active').removeClass('entering');
-
-        currentIndex = index;
-
-        // 更新堆叠状态
-        updateStackStates();
 
+      // 等待动画完成后更新状态
+      setTimeout(function() {
+        updateSlidePositions();
         isAnimating = false;
-      }, 800); // 与 CSS 动画时间一致
+      }, 600); // 与动画时间一致
     }
 
     // 切换到下一张
     function nextSlide() {
-      const nextIndex = (currentIndex + 1) % totalSlides;
+      const nextIndex = getCircularIndex(currentIndex + 1);
       switchSlide(nextIndex);
     }
 
@@ -374,7 +382,7 @@ $(function () {
 
     // 初始化
     if (totalSlides > 0) {
-      updateStackStates();
+      updateSlidePositions();
       startAutoPlay();
     }
   })();