实现卡片堆叠效果,后面卡片可见部分轮廓
All checks were successful
continuous-integration/drone/push Build is passing

- 当前卡片在最前面,完全显示
- 后面3张卡片依次堆叠,露出顶部边缘
- 使用 scale 和 translateY 制造深度感
- 堆叠卡片透明度和亮度递减,形成视觉层次
- 切换时当前卡片滑出,新卡片从右侧滑入最前面
- 其他卡片自动更新堆叠位置
- 添加 perspective 增强3D效果
- 容器底部增加 padding 防止堆叠卡片被裁剪

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
2025-11-25 16:01:32 +08:00
parent 62b755df3f
commit 817df58b69
2 changed files with 74 additions and 13 deletions

View File

@@ -272,6 +272,32 @@ $(function () {
let isAnimating = false;
const autoPlayDuration = 3000; // 3秒自动切换
// 更新所有幻灯片的堆叠状态
function updateStackStates() {
$slides.each(function(index) {
const $slide = $(this);
// 移除所有堆叠类
$slide.removeClass('stack-1 stack-2 stack-3');
// 如果不是当前激活的,且不在动画中
if (index !== currentIndex && !$slide.hasClass('leaving') && !$slide.hasClass('entering')) {
// 计算相对于当前索引的位置
let offset = index - currentIndex;
if (offset < 0) offset += totalSlides;
// 只显示后面3张卡片的堆叠效果
if (offset === 1) {
$slide.addClass('stack-1');
} else if (offset === 2) {
$slide.addClass('stack-2');
} else if (offset === 3) {
$slide.addClass('stack-3');
}
}
});
}
// 切换到指定幻灯片
function switchSlide(index) {
if (index === currentIndex || isAnimating) return;
@@ -281,8 +307,8 @@ $(function () {
const $currentSlide = $slides.eq(currentIndex);
const $nextSlide = $slides.eq(index);
// 移除所有动画类
$slides.removeClass('leaving entering');
// 移除所有动画类和堆叠类
$slides.removeClass('leaving entering stack-1 stack-2 stack-3');
// 添加离开和进入动画
$currentSlide.addClass('leaving');
@@ -301,6 +327,10 @@ $(function () {
$nextSlide.addClass('active').removeClass('entering');
currentIndex = index;
// 更新堆叠状态
updateStackStates();
isAnimating = false;
}, 800); // 与 CSS 动画时间一致
}
@@ -344,6 +374,7 @@ $(function () {
// 初始化
if (totalSlides > 0) {
updateStackStates();
startAutoPlay();
}
})();