简化解决方案幻灯片为单卡片淡入淡出效果
All checks were successful
continuous-integration/drone/push Build is passing

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

🤖 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:12:00 +08:00
parent 5c4316d49e
commit bdad886cf9
2 changed files with 14 additions and 183 deletions

View File

@@ -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;
const oldIndex = currentIndex;
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');
// 更新幻灯片
$slides.removeClass('active');
$slides.eq(index).addClass('active');
// 更新按钮
$tabs.removeClass('active');
$tabs.eq(newIndex).addClass('active');
$tabs.eq(index).addClass('active');
// 更新当前索引
currentIndex = newIndex;
// 等待动画完成后更新状态
setTimeout(function() {
updateSlidePositions();
isAnimating = false;
}, 600); // 与动画时间一致
currentIndex = index;
}
// 切换到下一张
function nextSlide() {
const nextIndex = getCircularIndex(currentIndex + 1);
const nextIndex = (currentIndex + 1) % totalSlides;
switchSlide(nextIndex);
}
@@ -382,7 +325,6 @@ $(function () {
// 初始化
if (totalSlides > 0) {
updateSlidePositions();
startAutoPlay();
}
})();