本文详解如何为纯 HTML+CSS+JS 实现的照片轮播器添加可逆动画逻辑，通过 CSS 自定义属性 --direction 动态控制 @keyframes 的位移方向，使「上一张」操作触发光滑左滑入场、右滑退场效果，彻底解决单向动画导致的体验割裂问题。
本文详解如何为纯 html+css+js 实现的照片轮播器添加可逆动画逻辑，通过 css 自定义属性 `--direction` 动态控制 `@keyframes` 的位移方向，使「上一张」操作触发光滑左滑入场、右滑退场效果，彻底解决单向动画导致的体验割裂问题。
在构建现代 Web 轮播组件时，仅支持单向动画（如始终从右向左切换）会显著降低交互真实感——用户点击「上一张」时，内容却仍向右滑出，违背直觉。本文提供一套轻量、无依赖、语义清晰的双向动画解决方案，核心在于将动画方向解耦为运行时可控的状态，而非硬编码在 CSS 中。
✅ 核心思路：用 CSS 变量驱动动画方向
我们引入一个 CSS 自定义属性 --direction（默认值为 1），并在关键帧中使用 calc(var(--direction) * 100%) 动态计算位移量：
@keyframes show {
0% {
transform: translateX(calc(var(--direction) * 100%)); /* 进场：根据方向决定起始位置 */
}
100% {
transform: translateX(0);
}
}
@keyframes hide {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(calc(-1 * var(--direction) * 100%)); /* 退场：反向退出 */
}
}这样，当 --direction: 1 时，show 从 100% → 0（右→左入场），hide 从 0 → -100%（左→右退场）；当 --direction: -1 时，show 从 -100% → 0（左→右入场），hide 从 0 → 100%（右→左退场）——完美匹配用户操作意图。
✅ JavaScript 层：按需注入方向参数
原 playSlide(slide) 函数升级为 playSlide(slide, direction)，并在调用时传入方向标识（1 表示下一帧，-1 表示上一帧）：
// 设置 --direction 并自动恢复（避免影响后续自动播放）
function setDirection(d) {
document.querySelector('.slider').style.setProperty('--direction', d);
clearTimeout(directionResetTimer);
directionResetTimer = setTimeout(() => setDirection(1), 1000);
}
let directionResetTimer;
// 点击事件绑定（关键！）
sliderArrowLeft.addEventListener('click', () => {
playSlide(--currentSlide, -1); // ← 上一张：方向 -1
});
sliderArrowRight.addEventListener('click', () => {
playSlide(++currentSlide, 1); // → 下一张：方向 1
});
// 圆点点击：智能计算相对方向（向前/向后跳转均适配）
for (let i = 0; i < sliderDots.length; i++) {
sliderDots[i].addEventListener('click', function() {
const targetIndex = sliderDots.indexOf(this);
const delta = targetIndex - currentSlide;
const dir = Math.sign(delta); // +1 / -1 / 0（当前页不触发动画）
if (dir !== 0) playSlide(currentSlide = targetIndex, dir);
});
}? 注意：Math.sign(0) 返回 0，因此点击当前激活圆点不会重置动画方向或触发无意义过渡，提升性能与体验一致性。
✅ 完整初始化与防抖优化
为保障自动播放不被方向设置干扰，我们分离定时器逻辑，并在鼠标悬停时暂停、离开后续播（含剩余时间补偿）：
let timeoutDate;
const elementsContainer = document.querySelector('.elements');
elementsContainer.addEventListener('mouseover', () => {
remainingMs = sliderSpeed - (new Date().getTime() - timeoutDate.getTime());
clearTimeout(sliderTimer);
});
elementsContainer.addEventListener('mouseout', () => {
sliderTimer = setTimeout(() => playSlide(++currentSlide), remainingMs || sliderSpeed);
});同时，在 playSlide() 内部确保每次切换前清除旧定时器、更新 timeoutDate，并重置 currentActive 以维持状态同步。
✅ 最终效果与验证要点
- ✅ 点击「prev」：当前图右滑退出（hide 向 100%），目标图左滑入场（show 从 -100%）
- ✅ 点击「next」：当前图左滑退出（hide 向 -100%），目标图右滑入场（show 从 100%）
- ✅ 点击左侧圆点：自动识别为「向后跳转」，触发左滑入场
- ✅ 点击右侧圆点：自动识别为「向前跳转」，触发右滑入场
- ✅ 自动播放始终以 --direction: 1 运行，保持节奏统一
- ✅ 所有动画时长、缓动函数（ease-in-out）与过渡逻辑完全复用，零冗余 CSS
该方案不依赖任何第三方库，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ v79），且易于扩展（如添加淡入淡出混合动效、支持触摸拖拽等）。只需将上述 JS 与增强版 CSS 替换原文本，即可立即获得专业级双向轮播体验。
