评价卡片轮播（五星评分 + 自动播放切换 CSS 源码）

效果演示（真实可交互）

下方为评价卡片轮播：4 条真实感用户评价循环播放，每 3.8 秒自动切换。可点击左右箭头手动切换，也可点击底部圆点直达指定评价；鼠标移入轮播区域会暂停自动播放，移出后继续。

完整代码

HTML 结构：轨道（track）内横向排列多张评价卡，视口（viewport）裁剪溢出部分，切换时通过 transform: translateX 移动轨道：

<div class="tm-viewport">
  <div class="tm-track">
    <figure class="tm-card">
      <div class="tm-stars">★★★★★</div>
      <blockquote class="tm-quote">用了粤喵的组件后，面板质感直接提升了一个档次。</blockquote>
      <figcaption class="tm-person">
        <span class="tm-avatar">林</span>
        <span class="tm-meta">
          <b>林晓东</b>
          <small>前端负责人 · 星链科技</small>
        </span>
      </figcaption>
    </figure>
    <!-- 更多评价卡片... -->
  </div>
</div>

核心 CSS：卡片固定宽度 100%，轨道弹性布局不换行，切换动画使用缓出贝塞尔曲线：

.tm-track { display: flex; transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.tm-card { flex: 0 0 100%; }
.tm-dot { width: 8px; height: 8px; border-radius: 999px; transition: all .3s ease; }
.tm-dot.active { width: 22px; background: linear-gradient(90deg, #6c8cff, #a96cff); }

原生 JS 实现（无第三方库）：

let index = 0, timer = null;
function go(i) {
  index = (i + total) % total;
  track.style.transform = 'translateX(-' + (index * 100) + '%)';
  dots.forEach((d, k) => d.classList.toggle('active', k === index));
}
function restart() { clearInterval(timer); timer = setInterval(() => go(index + 1), 3800); }
wrap.addEventListener('mouseenter', () => clearInterval(timer));
wrap.addEventListener('mouseleave', restart);

参数说明

兼容性与性能

• 动画仅使用 transform 属性，浏览器走合成器线程，不触发重排重绘，长时间轮播依然流畅
• 自动播放基于 setInterval 与 transform 过渡，不依赖 IntersectionObserver，兼容 IE11 以外的所有现代浏览器
• 圆点由 JS 动态生成，评价数量增减时无需手写指示器
• 对 prefers-reduced-motion 敏感用户，可额外关闭自动播放或缩短动画时长

常见问题

Q: 评价条数不固定，圆点会自动更新吗？ 会，组件根据轨道内卡片数量动态生成圆点，增删评价卡后无需修改 JS。

Q: 如何让评价卡支持手势滑动？ 可在此基础上监听 touchstart/touchmove/touchend 计算位移差，配合 transition 实现轻扫切换，桌面端可用鼠标拖拽模拟。

Q: 自动播放会打扰用户吗？ 组件默认在鼠标悬停时暂停，移动端可改为首屏播放一次后停止，或增加播放/暂停按钮由用户控制。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换头像、文案与品牌色即可上线。