简化解决方案幻灯片为单卡片淡入淡出效果

- 移除复杂的堆叠和多列动画效果
- 改为简单的单卡片展示模式
- 使用 0.6s 的 opacity 淡入淡出过渡
- 保留 3 秒自动播放和按钮切换功能
- 保留鼠标悬停暂停、离开恢复播放功能
- 简化 CSS 代码，提升可维护性
- 简化 JavaScript 逻辑，移除复杂的动画状态管理

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

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

css/index.css

@@ -2696,142 +2696,31 @@ html {
   display: none;
 }
 
-/* 下层：幻灯片容器 - 左中右三栏布局 */
+/* 下层：幻灯片容器 */
 .solution-slider {
   position: relative;
   min-height: 450px;
-  perspective: 1500px;
+  overflow: hidden;
-  overflow: visible;
 }
 
-/* 单个幻灯片 - 默认隐藏 */
+/* 单个幻灯片 */
 .solution-slide {
   position: absolute;
   top: 0;
-  left: 50%;
+  left: 0;
   width: 100%;
   opacity: 0;
-  transform: translateX(-50%) scale(0.7);
+  transition: opacity 0.6s ease;
-  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) scale(1);
   pointer-events: auto;
-  z-index: 10;
+  z-index: 2;
-}
-
-/* 左侧卡片 - 上一张的预览 */
-.solution-slide.prev {
-  position: absolute;
-  left: 0;
-  opacity: 0.5;
-  transform: translateX(-55%) scale(0.85);
-  pointer-events: none;
-  z-index: 5;
-  filter: brightness(0.7);
-}
-
-/* 右侧卡片 - 下一张的预览 */
-.solution-slide.next {
-  position: absolute;
-  left: auto;
-  right: 0;
-  opacity: 0.5;
-  transform: translateX(55%) scale(0.85);
-  pointer-events: none;
-  z-index: 5;
-  filter: brightness(0.7);
-}
-
-/* 切换动画 - 从右到中 */
-.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 {
-    left: 0;
-    right: auto;
-    opacity: 1;
-    transform: translateX(0) scale(1);
-    filter: brightness(1);
-  }
-}
-
-/* 切换动画 - 从中到左 */
-.solution-slide.slide-to-left {
-  animation: slideFromCenterToLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  z-index: 9;
-}
-
-@keyframes slideFromCenterToLeft {
-  from {
-    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

@@ -269,83 +269,26 @@ $(function () {
     const totalSlides = $slides.length;
     let currentIndex = 0;
     let autoPlayTimer = null;
-    let isAnimating = false;
     const autoPlayDuration = 3000; // 3秒自动切换
 
-    // 获取循环索引
-    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('active prev next slide-to-center slide-to-left slide-out-left slide-in-right');
-
-        if (index === currentIndex) {
-          // 中间主卡片
-          $slide.addClass('active');
-        } else if (index === prevIndex) {
-          // 左侧预览卡片
-          $slide.addClass('prev');
-        } else if (index === nextIndex) {
-          // 右侧预览卡片
-          $slide.addClass('next');
-        }
-        // 其他卡片保持隐藏状态
-      });
-    }
-
     // 切换到指定幻灯片
     function switchSlide(index) {
-      if (index === currentIndex || isAnimating) return;
+      if (index === currentIndex) return;
 
-      isAnimating = true;
+      // 更新幻灯片
-
+      $slides.removeClass('active');
-      const oldIndex = currentIndex;
+      $slides.eq(index).addClass('active');
-      const newIndex = index;
-      const prevOldIndex = getCircularIndex(oldIndex - 1);
-      const nextNewIndex = getCircularIndex(newIndex + 1);
-
-      // 移除所有动画类
-      $slides.removeClass('slide-to-center slide-to-left slide-out-left slide-in-right');
-
-      // 应用切换动画
-      // 右侧卡片 -> 中间
-      $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(newIndex).addClass('active');
+      $tabs.eq(index).addClass('active');
 
-      // 更新当前索引
+      currentIndex = index;
-      currentIndex = newIndex;
-
-      // 等待动画完成后更新状态
-      setTimeout(function() {
-        updateSlidePositions();
-        isAnimating = false;
-      }, 600); // 与动画时间一致
     }
 
     // 切换到下一张
     function nextSlide() {
-      const nextIndex = getCircularIndex(currentIndex + 1);
+      const nextIndex = (currentIndex + 1) % totalSlides;
       switchSlide(nextIndex);
     }
 
@@ -382,7 +325,6 @@ $(function () {
 
     // 初始化
     if (totalSlides > 0) {
-      updateSlidePositions();
       startAutoPlay();
     }
   })();