- 移除复杂的堆叠和多列动画效果 - 改为简单的单卡片展示模式 - 使用 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:
72
js/index.js
72
js/index.js
@@ -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();
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user