js图片切换特效教程：制作带淡入淡出的图片轮播组件

图片轮播常见于首页横幅、活动介绍、产品展示和作品集。淡入淡出效果让当前画面逐渐隐去、下一张逐渐显现，视觉上比直接替换柔和。不过，轮播不只是定时换图：还要处理动画重叠、用户暂停、页面切到后台、键盘操作和图片的可访问性。

本文用原生 JavaScript 和 CSS 实现一个不依赖第三方库的轮播组件。示例通过 CSS 背景展示图片，因此代码中不使用图片标签；图片仅作为装饰性背景，另有文字说明。若图片承载了必须传达的信息，例如商品颜色细节或图表数据，应使用带有替代文本的语义化图片方案，而不要只依赖背景图。

适用场景与不适用场景

淡入淡出轮播适合展示数量有限、每张图都配有标题或说明的内容，例如活动主视觉、精选案例和产品系列。它通常一次只呈现一张画面，能保持页面简洁，也不会像横向滑动那样要求用户理解拖动方向。

但轮播不是所有图片列表的合适呈现方式。如果用户需要同时比较多张商品图、快速浏览大量内容，网格或缩略图列表往往更有效。自动轮播也不应承担必须及时阅读的信息，例如重要通知、价格条款或唯一的行动入口：用户可能在内容切换前还没读完。对此应提供暂停控制，避免自动切换，或将核心信息放在轮播之外。

示例使用 CSS 的 background-image。背景图适合纯装饰性画面，但默认没有可供辅助技术读取的替代文本；示例因此提供独立的标题和说明。真实项目若需要传达图片本身的信息，应选择能提供替代文本的语义化图像元素，并为每张图写准确的说明。

实现思路：让 CSS 管动画，让 JavaScript 管状态

组件包含多张相互叠放的幻灯片。当前幻灯片的透明度为 1，其他幻灯片为 0；切换时，只改变它们的激活类，由 CSS 的 transition 完成淡入淡出。JavaScript 负责维护当前索引、响应按钮、生成圆点和管理自动播放。

与逐帧修改透明度相比，这种方式代码更少，也便于使用浏览器的动画优化。不过，淡入淡出只改变透明度，不会自动隐藏非当前内容的交互区域。示例中的幻灯片只包含静态文字；如果幻灯片里有链接或表单，还应在切换时确保非当前内容不会被键盘焦点访问。

可运行示例

将下面代码保存为 .html 文件即可在浏览器中运行。示例中的 /images/slide-1.jpg 等路径需要替换成项目中的真实图片地址；如果图片文件不存在，背景区域会显示渐变底色和文字，但不会显示照片。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>淡入淡出图片轮播</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 32px 16px;
      font-family: system-ui, sans-serif;
      color: #172033;
      background: #f4f6fa;
    }

    .carousel {
      width: min(900px, 100%);
      margin: 0 auto;
    }

    .carousel__stage {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 7;
      min-height: 240px;
      border-radius: 14px;
      background: #26364d;
      isolation: isolate;
    }

    .carousel__slide {
      position: absolute;
      inset: 0;
      display: grid;
      align-content: end;
      padding: clamp(20px, 5vw, 56px);
      color: #fff;
      background-color: #26364d;
      background-position: center;
      background-size: cover;
      opacity: 0;
      transition: opacity 600ms ease;
    }

    .carousel__slide::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(transparent, rgb(0 0 0 / 68%));
      content: "";
    }

    .carousel__slide.is-active {
      opacity: 1;
    }

    .carousel__slide h2,
    .carousel__slide p {
      max-width: 36em;
      margin: 0;
    }

    .carousel__slide h2 {
      margin-bottom: 8px;
      font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .carousel__controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 12px;
    }

    .carousel__buttons,
    .carousel__dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .carousel button {
      min-width: 44px;
      min-height: 44px;
      border: 1px solid #aab4c4;
      border-radius: 8px;
      color: inherit;
      background: #fff;
      font: inherit;
      cursor: pointer;
    }

    .carousel button:focus-visible {
      outline: 3px solid #2459d3;
      outline-offset: 2px;
    }

    .carousel__dots button {
      min-width: 14px;
      min-height: 14px;
      width: 14px;
      height: 14px;
      padding: 0;
      border-radius: 50%;
    }

    .carousel__dots button[aria-current="true"] {
      border-color: #172033;
      background: #172033;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    @media (prefers-reduced-motion: reduce) {
      .carousel__slide {
        transition: none;
      }
    }
  </style>
</head>
<body>
  <section class="carousel" data-interval="5000" aria-label="精选内容">
    <div class="carousel__stage">
      <article class="carousel__slide is-active"
        style="background-image: url('/images/slide-1.jpg')"
        role="group" aria-roledescription="幻灯片"
        aria-label="第 1 张，共 3 张">
        <h2>海边清晨</h2>
        <p>使用你自己的图片路径替换示例地址。</p>
      </article>

      <article class="carousel__slide"
        style="background-image: url('/images/slide-2.jpg')"
        role="group" aria-roledescription="幻灯片"
        aria-label="第 2 张，共 3 张" aria-hidden="true">
        <h2>山间步道</h2>
        <p>每张幻灯片都应有清楚、简短的文字说明。</p>
      </article>

      <article class="carousel__slide"
        style="background-image: url('/images/slide-3.jpg')"
        role="group" aria-roledescription="幻灯片"
        aria-label="第 3 张，共 3 张" aria-hidden="true">
        <h2>城市夜色</h2>
        <p>减少不必要的自动切换，让用户有时间阅读。</p>
      </article>
    </div>

    <div class="carousel__controls">
      <div class="carousel__buttons">
        <button type="button" data-action="prev" aria-label="上一张">上一张</button>
        <button type="button" data-action="toggle" aria-pressed="false">暂停自动播放</button>
        <button type="button" data-action="next" aria-label="下一张">下一张</button>
      </div>
      <div class="carousel__dots" aria-label="选择幻灯片"></div>
    </div>
    <p class="sr-only" data-status aria-live="polite"></p>
  </section>

  <script>
    document.querySelectorAll(".carousel").forEach((root) => {
      const slides = Array.from(root.querySelectorAll(".carousel__slide"));
      const dots = root.querySelector(".carousel__dots");
      const status = root.querySelector("[data-status]");
      const toggleButton = root.querySelector('[data-action="toggle"]');

      if (slides.length < 2 || !dots || !status || !toggleButton) {
        return;
      }

      const rawInterval = Number(root.dataset.interval);
      const interval = Number.isFinite(rawInterval)
        ? Math.min(60000, Math.max(2000, rawInterval))
        : 5000;

      let index = slides.findIndex((slide) =>
        slide.classList.contains("is-active")
      );
      if (index < 0) index = 0;

      let timer = null;
      let userPaused = false;

      slides.forEach((slide, i) => {
        const dot = document.createElement("button");
        dot.type = "button";
        dot.setAttribute("aria-label", "切换到第 " + (i + 1) + " 张");
        dot.addEventListener("click", () => show(i, true));
        dots.append(dot);
      });

      const dotButtons = Array.from(dots.querySelectorAll("button"));

      function show(nextIndex, announce) {
        index = (nextIndex + slides.length) % slides.length;

        slides.forEach((slide, i) => {
          const active = i === index;
          slide.classList.toggle("is-active", active);
          slide.setAttribute("aria-hidden", String(!active));
          dotButtons[i].setAttribute("aria-current", String(active));
        });

        if (announce) {
          status.textContent = "已切换到第 " + (index + 1) + " 张，共 " +
            slides.length + " 张";
        }
      }

      function stopTimer() {
        if (timer !== null) {
          window.clearInterval(timer);
          timer = null;
        }
      }

      function startTimer() {
        stopTimer();
        if (!userPaused && !document.hidden) {
          timer = window.setInterval(() => show(index + 1, false), interval);
        }
      }

      root.querySelector('[data-action="prev"]').addEventListener("click", () => {
        show(index - 1, true);
        startTimer();
      });

      root.querySelector('[data-action="next"]').addEventListener("click", () => {
        show(index + 1, true);
        startTimer();
      });

      toggleButton.addEventListener("click", () => {
        userPaused = !userPaused;
        toggleButton.setAttribute("aria-pressed", String(userPaused));
        toggleButton.textContent = userPaused
          ? "继续自动播放"
          : "暂停自动播放";
        startTimer();
      });

      root.addEventListener("mouseenter", stopTimer);
      root.addEventListener("mouseleave", startTimer);
      root.addEventListener("focusin", stopTimer);
      root.addEventListener("focusout", (event) => {
        if (!root.contains(event.relatedTarget)) startTimer();
      });

      document.addEventListener("visibilitychange", () => {
        if (document.hidden) stopTimer();
        else startTimer();
      });

      show(index, false);
      startTimer();
    });
  </script>
</body>
</html>

代码中的参数与边界

data-interval="5000" 表示自动播放间隔为 5000 毫秒。JavaScript 将输入转换为数字，并用 Number.isFinite 排除空值、无穷值等非有限数字；合法范围被限制在 2000 至 60000 毫秒之间。低于下限的数值会被调整为 2000，高于上限的数值会被调整为 60000。缺失或无效时使用 5000 毫秒默认值。

这个范围是示例的产品决策，不是浏览器强制限制，也不保证符合所有用户体验要求。对文字较多的幻灯片，5 秒可能仍然不够；必要时可关闭自动播放，或提供明显的暂停按钮。代码没有把切换动画时长做成数据参数：动画时长由 CSS 的 600ms 控制，而自动播放间隔由 HTML 数据属性控制，两者职责不同。

示例在幻灯片少于两张，或必需控件缺失时不初始化轮播逻辑。只有一张内容时，自动播放没有意义；实际页面可以进一步隐藏上一张、下一张和圆点控件。轮播数量也不应无限增长：幻灯片越多，下载、解码、布局和用户浏览成本越高。真实项目中应按内容需求控制数量，并考虑图片尺寸、格式和加载策略。

暂停策略与无障碍细节

代码在鼠标进入轮播区域、键盘焦点进入轮播区域，以及页面进入后台标签页时暂停定时器；离开或回到前台后，再根据用户是否手动暂停来决定是否恢复。点击上一张、下一张或圆点会重新开始计时。这样可以减少用户正在操作时画面突然跳走的情况。

暂停按钮使用 aria-pressed 表示是否处于手动暂停状态，圆点使用 aria-current 标识当前项，状态区域仅在用户主动切换时播报结果。自动播放时不持续播报，避免屏幕阅读器反复打断用户。实际产品仍应结合目标浏览器和辅助技术进行测试；ARIA 属性只能补充语义，不能替代真实的键盘测试和可读内容。

示例响应系统的 prefers-reduced-motion 设置：用户启用减少动态效果后，CSS 取消透明度过渡。注意，这只取消动画，并不会自动关闭定时器。如果产品要求减少动态效果用户默认不自动播放，还需要在 JavaScript 中读取 window.matchMedia("(prefers-reduced-motion: reduce)")，并据此决定是否调用 startTimer；同时要考虑用户之后更改系统设置时如何更新行为。

示例使用背景图作为画面，标题和说明则是普通文本。文字颜色与图片对比度会随图片内容改变，渐变遮罩只能改善部分画面的可读性，不能保证每张图都满足对比度要求。上线前应检查真实图片与文字组合；必要时增加不透明背景、调整文字位置或更换图片。

图片地址与安全使用

示例中的图片地址直接写在 HTML 的静态样式里，路径由开发者维护。不要把用户提交的任意字符串未经处理就拼进 HTML、CSS 或脚本，也不要把图片 URL 当成“天然安全”的输入。项目若需要动态指定图片，应在数据层限定可接受的来源和协议，按应用环境选择相对路径或 HTTPS 地址，并使用安全的 DOM API 赋值；避免用字符串拼接生成整段 HTML。

具体的 URL 校验规则取决于应用：只允许站内资源时，可针对本站来源和允许的路径做限制；允许第三方图片时，应明确允许的主机列表及其维护方式。协议白名单也要符合业务要求。仅检查字符串是否以某个前缀开头不一定足够，因为 URL 的解析与编码规则较复杂。服务端仍需执行自己的输入校验与访问控制，前端校验不能代替服务端安全措施。

轮播代码不会验证图片是否存在、格式是否有效或尺寸是否合适。浏览器遇到无法加载的背景图时会显示背景色，但通常不会提供与语义化图片相同的替代文本行为。对用户上传内容，还需在服务端控制文件类型、大小和存储策略；仅依赖扩展名判断文件内容并不可靠。

常见错误与排查

图片没有显示

先检查图片路径相对于网站根目录还是当前文档目录，再确认文件确实可访问、大小写与部署环境一致。示例以渐变和底色作为回退，因此路径错误时组件本身仍能显示文字，但不会出现照片。浏览器开发者工具的网络面板可以帮助定位 404、权限或跨域相关问题。背景图不显示时，优先排查网络请求和路径，不要先改切换逻辑。

只有第一张显示，或者画面一片空白

检查 HTML 中第一张幻灯片是否有 is-active，以及 CSS 是否加载。JavaScript 初始化后会按当前激活项重新设置状态；如果脚本在 DOM 创建之前执行，查询可能找不到元素。示例脚本放在内容之后，因此不需要额外等待 DOM。如果把脚本移到页面头部，应使用 defer 或在 DOM 就绪后初始化。

切换时闪烁或出现空白

淡出和淡入依赖所有幻灯片叠放在同一个定位容器里。检查舞台是否设置了 position: relative，幻灯片是否绝对定位并覆盖舞台，以及切换类是否正确添加。若把非当前项直接设为 display: none，透明度过渡就无法按预期执行，因为元素不参与渲染。图片首次加载较慢时，也可能先看到底色；可根据需要提前加载关键图片，并评估加载对页面性能的影响。

动画重叠、速度不一致

不要在每次切换时额外创建一个新的 setInterval 而不清理旧定时器。多个计时器会造成切换越来越快。示例的 startTimer 会先调用 stopTimer，确保同一组件最多保留一个定时器。间隔也不应短于动画时长太多，否则用户可能还没看清当前画面就开始下一次切换。

圆点状态与画面不同步

所有切换入口都应调用同一个状态更新函数。若按钮、定时器和圆点分别修改索引或类名，漏掉其中一个入口就会导致当前画面、圆点和辅助技术状态不一致。示例统一由 show 更新激活类、aria-hidden 和 aria-current，并在函数中对索引做循环处理。

页面离开后仍在后台切换

只监听鼠标移入和移出不足以管理自动播放：触屏设备没有鼠标，浏览器切换标签页也不会触发鼠标离开。示例额外监听焦点和 visibilitychange。如果在单页应用中动态移除组件，还应在卸载时清除定时器并移除事件监听器；示例面向静态页面，没有实现组件销毁流程。

扩展时要重新考虑的事情

要改成左右滑动，可以在容器中维护每张幻灯片的位移并处理触摸手势，但需要补充手势阈值、方向锁定、触控与鼠标输入的统一策略，以及拖动时与页面滚动的冲突处理。不要简单地把透明度过渡改成横向移动，就认为完成了触摸轮播。

要从接口加载图片，应区分数据加载状态与轮播状态：接口失败、返回空数组、字段缺失和图片加载失败都需要明确处理。若每张幻灯片带链接，应防止非当前项内的链接仍能被键盘访问；可以在不可见时将其从交互顺序中移除，并在激活时恢复，具体做法应兼容目标浏览器。还要避免自动切换过程中焦点被强行移动，焦点应留在用户当前操作的位置。

部署前建议至少验证以下事项：无 JavaScript 时是否有可读内容；键盘能否操作所有控件；焦点是否清楚可见；小屏幕上内容是否被裁切；系统减少动态效果时过渡是否合适；图片路径、对比度和加载失败是否有可接受的表现。把这些边界纳入设计，淡入淡出轮播才不仅是一个视觉效果，也能成为可维护、可理解的界面组件。