优化解决方案幻灯片为堆叠滑动效果

- 改为从右到左的堆叠滑动切换效果
- 当前幻灯片向左滑出，新幻灯片从右侧滑入
- 添加 z-index 层级控制，实现堆叠视觉效果
- 使用 CSS 关键帧动画替代 transition
- 添加 isAnimating 锁，防止动画期间重复触发
- 动画时长 0.8s，使用 cubic-bezier 缓动函数
- 保持自动播放和悬停暂停功能

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

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

js/index.js

@@ -269,21 +269,40 @@ $(function () {
     const totalSlides = $slides.length;
     let currentIndex = 0;
     let autoPlayTimer = null;
+    let isAnimating = false;
     const autoPlayDuration = 3000; // 3秒自动切换
 
     // 切换到指定幻灯片
     function switchSlide(index) {
-      if (index === currentIndex) return;
+      if (index === currentIndex || isAnimating) return;
 
-      // 更新幻灯片
-      $slides.removeClass('active');
-      $slides.eq(index).addClass('active');
+      isAnimating = true;
+
+      const $currentSlide = $slides.eq(currentIndex);
+      const $nextSlide = $slides.eq(index);
+
+      // 移除所有动画类
+      $slides.removeClass('leaving entering');
+
+      // 添加离开和进入动画
+      $currentSlide.addClass('leaving');
+      $nextSlide.addClass('entering');
 
       // 更新按钮
       $tabs.removeClass('active');
       $tabs.eq(index).addClass('active');
 
-      currentIndex = index;
+      // 等待动画完成
+      setTimeout(function () {
+        // 移除旧的 active 类
+        $currentSlide.removeClass('active leaving');
+
+        // 添加新的 active 类
+        $nextSlide.addClass('active').removeClass('entering');
+
+        currentIndex = index;
+        isAnimating = false;
+      }, 800); // 与 CSS 动画时间一致
     }
 
     // 切换到下一张