如何用最少代码制作HTML轮播图-html教程-PHP中文网

最简轮播图用css动画驱动，js仅控制暂停/恢复：.carousel:hover .slides{animation-play-state:paused} 一行即可。

如何用最少代码制作html轮播图

用 `HTML` + `CSS` + 一行 `JavaScript` 实现自动轮播

不需要框架、不引入外部库，纯原生实现最简轮播图：核心是靠 CSS 的 @keyframes 配合 animation 控制切换，JavaScript 只负责点击时暂停/恢复动画 —— 这样连定时器都不用写。

关键点在于把「轮播逻辑」交给 CSS 动画驱动，JS 只做交互干预：

animation-iteration-count: infinite 让轮播永续
用 animation-play-state: paused 在鼠标悬停或点击时暂停
每张图用 transform: translateX() 定位，配合 width 和 overflow: hidden 做视口裁剪

示例结构（3 张图）：

<div class="carousel">
  <div class="slides">
    @@##@@
    @@##@@
    @@##@@
  </div>
  <button class="prev"></button>
  <button class="next"></button>
</div>

为什么不用 `setInterval` + `classList.toggle`？

手动维护索引、计算偏移、处理边界、防连续点击抖动……代码量翻倍，且容易在快速点击时错帧或卡顿。CSS 动画由浏览器合成线程驱动，更顺滑、更省 CPU。

但要注意：animation 方案默认不支持「点击跳转指定页」，如果需要，得加几行 JS 绑定 click 到指示器，并重置 animation 的 currentTime（需兼容性兜底）：

现代浏览器可用 el.getAnimations()[0].currentTime = targetTime
旧版 Safari 或 IE 需 fallback 到 transform 手动设置，同时暂停动画
若只要左右切换，完全可省略这步 —— next 按钮只需触发 animation-play-state: running 并确保动画周期对齐

`transition` 能不能替代 `animation`？

可以，但会多写逻辑：每次点击都要手动修改 transform 的值并触发重排，还要用 setTimeout 或 transitionend 监听切换完成，才能衔接下一次。而 animation 把整个循环打包进声明式规则里，更干净。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

一个易忽略的坑：transition 在初始加载时可能意外触发一次（比如从 transform: none 到 translateX(0)），导致首帧闪动；animation 可通过 animation-delay 或设为 forwards 避开。

最小可靠配置示例（CSS 片段）：

.slides {
  display: flex;
  animation: slide 6s infinite;
}
@keyframes slide {
  0%, 25% { transform: translateX(0); }
  33%, 58% { transform: translateX(-100%); }
  66%, 91% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}