- 当前卡片在最前面,完全显示 - 后面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:
35
js/index.js
35
js/index.js
@@ -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();
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user