原生JS动画实例：实现轮播图与平滑滚动效果

作者：流萤时间：2026-10-30 19:09:01浏览：627

深入讲解如何使用原生JavaScript实现高性能无缝轮播图与平滑滚动效果，涵盖requestAnimationFrame渲染机制、DOM无缝过渡技巧、缓动函数计算及性能优化避坑指南。

在前端交互设计中，轮播图（Carousel）与页面平滑滚动（Smooth Scroll）是最常见且高频使用的两个动态效果。很多初学者在需要此类交互时往往第一时间寻找现成的第三方插件，但在轻量页面或定制化要求较高的场景下，第三方库往往伴随着多余的代码体积与不必要的性能开销。使用原生 JavaScript 独立编写动画，不仅能彻底摆脱外部依赖，更重要的是能让开发者深入理解浏览器重绘时序、动画执行帧率及 DOM 渲染性能。本文将通过两个经典且实用的原生实例，详细拆解无缝轮播图与平滑滚动的具体实现流程、代码细节与底层运行机制。

一、动画驱动核心对比：requestAnimationFrame 与定时器机制

在编写具体动画代码之前，必须明确驱动动画更新的底层核心方案。在 JavaScript 中，控制数值连续变化通常有两种途径：基于时间的定时器（setInterval / setTimeout）与浏览器原生提供的动画帧接口 requestAnimationFrame。理解两者的根本差异，是避免动画掉帧和页面卡顿的前提。

原生JS动画实例：实现轮播图与平滑滚动效果 — 图 1：requestAnimationFrame 与定时器在浏览器渲染周期中的时序对比

setInterval 属于 JavaScript 事件循环中的宏任务。由于主线程可能被其他同步任务占用，定时器的触发时间具有不确定性，无法保证与屏幕刷新率（如 60Hz 屏幕的 16.6ms 周期）严格对齐。如果在一次重绘之间执行了两次计算，或者在重绘后才执行，就会造成多余的计算开销或产生掉帧（Jank）。

相对而言，window.requestAnimationFrame（简称 rAF）是专门为动画设计的 API。浏览器在准备进行下一次硬件屏幕重绘前，会精准调用传入的回调函数，从而保证动画变化与屏幕物理刷新步调完全一致。此外，当页面切入后台标签页或处于最小化状态时，rAF 会自动暂停，大幅降低 CPU 与电池损耗。

特性维度	requestAnimationFrame	setInterval / setTimeout
执行时机	由浏览器在下一次重绘前统筹调度	等待设定的固定微秒数，推入宏任务队列
屏幕同步率	完全匹配硬件刷新频率（60Hz/120Hz自适应）	无法同步，容易出现时间漂移与画面卡顿
能耗与后台表现	后台标签页或隐藏 iframe 中自动暂停节电	后台继续轮询执行，持续消耗计算资源
适用场景	逐帧计算的平滑缓动动画、canvas 渲染等	轮播图的自动定时翻页步长控制（非逐帧过程）

二、实例一：原生JS实现无缝滑动轮播图

轮播图的核心功能包括：左右翻页、下方指示点跳转、自动定时轮播，以及最具技术细节的“无缝衔接”。所谓无缝，是指当轮播到最后一张图片时，继续向后切换能够自然滑入第一张，中间不出现倒退反卷的视觉破绽。

1. 无缝过渡的结构设计与复位原理

假设我们有 3 张真实的轮播项（项 1、项 2、项 3）。要在项 3 向右滑到项 1 时保持同向平滑移动，必须在项 3 的右侧克隆拼接一个“项 1 的副本”；同理，在项 1 的左侧也需拼接一个“项 3 的副本”。因此，实际的滑动轨道数组结构为：[项3副本, 项1, 项2, 项3, 项1副本]。

当用户在“项 3”点击下一页时，轨道正常开启平滑过渡，位移至“项 1 副本”（视觉上与项 1 完全一样）。当过渡完成瞬间（触发 transitionend 事件），程序立即将 CSS 过渡效果关闭（transition: none），并在零延迟下瞬间将轨道偏移量重置回真实的“项 1”（Index 1）。因为两个画面内容完全相同，用户视觉上感知不到任何突变，从而实现了无限向右循环滑动的视觉效果。

2. 完整实现代码

以下是具备无缝滚动、鼠标悬浮暂停、左右按钮切换及指示点同步的完整原生 JS 轮播图实现代码：

<!-- HTML 结构 -->
<div class="carousel-container" id="carousel">
  <div class="carousel-track" id="carouselTrack">
    <div class="carousel-slide">卡片 1</div>
    <div class="carousel-slide">卡片 2</div>
    <div class="carousel-slide">卡片 3</div>
  </div>
  <button class="carousel-btn prev" id="prevBtn">&lt;</button>
  <button class="carousel-btn next" id="nextBtn">&gt;</button>
  <div class="carousel-dots" id="dotsContainer"></div>
</div>

<!-- 关键 CSS 样式 -->
<style>
  .carousel-container {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 8px;
  }
  .carousel-track {
    display: flex;
    height: 100%;
    /* 默认不写 transition，由 JS 动态添加 */
  }
  .carousel-slide {
    flex: 0 0 600px;
    width: 600px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: #687D8D;
    color: #ffffff;
  }
  .carousel-slide:nth-child(even) {
    background-color: #879B88;
  }
</style>

<!-- JavaScript 交互控制 -->
<script>
  const track = document.getElementById('carouselTrack');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const dotsContainer = document.getElementById('dotsContainer');
  const container = document.getElementById('carousel');

  const originalSlides = Array.from(track.children);
  const slideCount = originalSlides.length;
  const slideWidth = 600;

  // 1. 克隆首尾节点以构造无缝结构
  const firstClone = originalSlides[0].cloneNode(true);
  const lastClone = originalSlides[slideCount - 1].cloneNode(true);
  track.appendChild(firstClone);
  track.insertBefore(lastClone, originalSlides[0]);

  // 当前真实显示从索引 1 开始（即原始的第一张）
  let currentIndex = 1;
  let isMoving = false; // 节流锁，防止连续暴力点击
  let autoPlayTimer = null;

  // 初始化轨道初始位置
  track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;

  // 动态创建指示点
  originalSlides.forEach((_, idx) => {
    const dot = document.createElement('span');
    dot.classList.add('dot');
    if (idx === 0) dot.classList.add('active');
    dot.addEventListener('click', () => {
      if (isMoving) return;
      moveToIndex(idx + 1);
    });
    dotsContainer.appendChild(dot);
  });

  function updateDots() {
    let dotIdx = currentIndex - 1;
    if (dotIdx < 0) dotIdx = slideCount - 1;
    if (dotIdx >= slideCount) dotIdx = 0;
    const dots = dotsContainer.querySelectorAll('.dot');
    dots.forEach((dot, idx) => {
      dot.classList.toggle('active', idx === dotIdx);
    });
  }

  // 移动至指定索引（开启动画过渡）
  function moveToIndex(index) {
    isMoving = true;
    currentIndex = index;
    track.style.transition = 'transform 0.4s ease-in-out';
    track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
    updateDots();
  }

  // 2. 核心：监听过渡结束事件实现无感瞬移复位
  track.addEventListener('transitionend', () => {
    isMoving = false;
    // 如果已经移到了末尾克隆项（项 1 副本）
    if (currentIndex >= slideCount + 1) {
      track.style.transition = 'none'; // 瞬间关闭过渡
      currentIndex = 1;
      track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
    }
    // 如果已经移到了开头克隆项（项 3 副本）
    if (currentIndex <= 0) {
      track.style.transition = 'none'; // 瞬间关闭过渡
      currentIndex = slideCount;
      track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
    }
  });

  // 按钮事件绑定
  nextBtn.addEventListener('click', () => {
    if (isMoving) return;
    moveToIndex(currentIndex + 1);
  });

  prevBtn.addEventListener('click', () => {
    if (isMoving) return;
    moveToIndex(currentIndex - 1);
  });

  // 自动播放与悬停控制
  function startAutoPlay() {
    autoPlayTimer = setInterval(() => {
      if (!isMoving) moveToIndex(currentIndex + 1);
    }, 3000);
  }
  function stopAutoPlay() {
    clearInterval(autoPlayTimer);
  }

  container.addEventListener('mouseenter', stopAutoPlay);
  container.addEventListener('mouseleave', startAutoPlay);

  startAutoPlay();
</script>

三、实例二：基于缓动算法的原生平滑滚动

现代 CSS 提供了 scroll-behavior: smooth 属性，浏览器的 window.scrollTo({ top, behavior: 'smooth' }) 也能实现基础平滑滚动。但原生 CSS 方式存在显著不足：无法自定义滚动持续时间（Duration），也无法调节减速或弹动的缓动曲线（Easing）。当滚动距离很长时，默认动画速度过慢；而滚动距离很短时，动画又显得过于仓促。

为了获得完全可控、质感细腻的平滑滚动体验，我们可以使用 requestAnimationFrame 结合数学缓动函数编写高度可定制的平滑滚动驱动器。

1. 缓动函数（Easing Function）数学原理

动画的本质是描述属性随时间推移的变化率。线性运动（匀速）容易给人机械僵硬的感觉，而符合物理直觉的动画往往具有“加速起步”或“平滑减速”的特征。三次方减速缓动（Ease-Out-Cubic）公式如下：

缓动进度公式： progress = 1 - Math.pow(1 - t, 3)
其中 t 为当前已消耗时间与总时长的比值（取值范围 0 到 1）。在起步时速度较快，接近目标点时逐渐减速刹车。

2. 封装平滑滚动函数

下面的示例封装了一个通用的 smoothScrollTo 函数。它接受目标垂直位置与动画时长，支持打断机制（例如用户在滚动过程中主动转动鼠标滚轮），并在到达目标位置后自动清理帧循环：

/**
 * 原生自定义平滑滚动函数
 * @param {number} targetY 目标滚动的绝对垂直位置 (像素)
 * @param {number} duration 动画持续时长 (毫秒)
 */
function smoothScrollTo(targetY, duration = 600) {
  const startY = window.pageYOffset || document.documentElement.scrollTop;
  const distance = targetY - startY;
  let startTime = null;
  let animationFrameId = null;

  // 三次方减速缓动算法
  function easeOutCubic(t) {
    return 1 - Math.pow(1 - t, 3);
  }

  // 逐帧渲染步长
  function animationStep(currentTime) {
    if (!startTime) startTime = currentTime;
    const elapsed = currentTime - startTime;
    // 进度比例系数 [0, 1]
    const progress = Math.min(elapsed / duration, 1);
    const easeProgress = easeOutCubic(progress);

    // 计算当前帧的实际垂直坐标
    const currentY = startY + distance * easeProgress;
    window.scrollTo(0, currentY);

    if (progress < 1) {
      animationFrameId = window.requestAnimationFrame(animationStep);
    } else {
      cleanup();
    }
  }

  // 用户主动滚轮或触摸时打断自动动画，避免界面拉扯
  function interruptAnimation() {
    if (animationFrameId) {
      window.cancelAnimationFrame(animationFrameId);
      cleanup();
    }
  }

  function cleanup() {
    window.removeEventListener('wheel', interruptAnimation);
    window.removeEventListener('touchstart', interruptAnimation);
  }

  // 绑定打断监听器并启动首帧
  window.addEventListener('wheel', interruptAnimation, { passive: true });
  window.addEventListener('touchstart', interruptAnimation, { passive: true });
  animationFrameId = window.requestAnimationFrame(animationStep);
}

// 实际使用示例：点击返回顶部按钮
document.getElementById('backToTopBtn').addEventListener('click', () => {
  smoothScrollTo(0, 800); // 800毫秒内平滑返回顶部
});

四、原生JS动画开发核心原则与排坑指南

使用原生 JavaScript 编写界面动画时，如果细节处理不当，很容易引入隐蔽的 Bug 或导致浏览器渲染卡顿。总结以下四个关键要点，能够帮助你在实际项目中保持动画的高效与稳定：

避免触发布局抖动（Layout Thrashing）： 在逐帧动画（rAF）或频繁执行的回调中，严禁在同一执行栈中交替“读取几何属性（如 offsetWidth, clientHeight, scrollTop）”并“写入样式”。这种交替操作会迫使浏览器同步重排，导致帧率严重骤降。推荐将读操作集中前置，写操作集中后置。
利用 CSS 硬件加速： 位移动画优先选用 transform: translate3d() 或 transform: translateX()。这些属性由 GPU 合成器线程直接处理，不会触发主线程的重绘（Paint）与重排（Reflow），在低性能设备或移动端上具有决定性的流畅度优势。
正确管理过渡事件： 监听 transitionend 时，要注意如果元素内存在子元素且子元素也有 CSS 过渡，事件可能会发生冒泡。在回调函数中建议加入 if (e.target !== track) return; 进行精准目标过滤。
尊重系统减弱动态效果设定： 部分系统用户在操作系统中启用了“减弱动态效果”（prefers-reduced-motion）。在专业项目中，可通过 window.matchMedia('(prefers-reduced-motion: reduce)') 进行检测，在用户要求减弱动画时直接进行无过渡瞬移，提升无障碍访问体验。