diff --git a/css/index.css b/css/index.css
index d4d219f..c4679a9 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2703,16 +2703,17 @@ html {
   overflow: hidden;
 }
 
-/* 单个幻灯片 */
+/* 单个幻灯片 - 堆叠效果 */
 .solution-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;
-  transform: translateX(100px);
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  transform: translateX(-100%);
+  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+  z-index: 1;
 }
 
 .solution-slide.active {
@@ -2720,6 +2721,39 @@ html {
   opacity: 1;
   transform: translateX(0);
   pointer-events: auto;
+  z-index: 10;
+}
+
+/* 即将离开的幻灯片 */
+.solution-slide.leaving {
+  position: absolute;
+  opacity: 1;
+  transform: translateX(0);
+  z-index: 5;
+  animation: slideOutLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slideOutLeft {
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+/* 即将进入的幻灯片 */
+.solution-slide.entering {
+  position: absolute;
+  opacity: 0;
+  transform: translateX(100%);
+  z-index: 8;
+  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slideInRight {
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 /* 幻灯片内容区域 */
diff --git a/js/index.js b/js/index.js
index e95dce0..a9776b7 100644
--- a/js/index.js
+++ b/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 动画时间一致
     }
 
     // 切换到下一张