html多张图片滚动

纯CSS实现图片滚动

使用@keyframes动画

通过定义关键帧动画让图片水平或垂直滚动,适合简单轮播场景。

示例代码：

<div class="slider">
  <img src="img1.jpg" alt="图1">
  <img src="img2.jpg" alt="图2">
  <img src="img3.jpg" alt="图3">
</div>
<style>
.slider {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}
.slider img {
  width: 100%;
  animation: scroll 10s infinite linear;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-600px); } / 假设3张图片总宽度600px /
}
</style>

CSS轮播技巧（暂停悬停）

利用:hover暂停动画，提升交互体验。

改进代码：

.slider:hover img {
  animation-play-state: paused;
}

JavaScript手动控制滚动

定时器自动切换 + 手动导航

通过setInterval控制图片切换，配合按钮实现手动操作。

示例代码：

<div class="js-slider">
  <div class="images">
    <img src="img1.jpg" class="active">
    <img src="img2.jpg">
    <img src="img3.jpg">
  </div>
  <button class="prev">上一张</button>
  <button class="next">下一张</button>
</div>
<script>
const images = document.querySelectorAll('.js-slider .images img');
let current = 0;
const autoPlay = setInterval(() => {
  images[current].classList.remove('active');
  current = (current + 1) % images.length;
  images[current].classList.add('active');
}, 3000);
document.querySelector('.prev').addEventListener('click', () => {
  clearInterval(autoPlay);
  images[current].classList.remove('active');
  current = (current 1 + images.length) % images.length;
  images[current].classList.add('active');
});
document.querySelector('.next').addEventListener('click', () => {
  clearInterval(autoPlay);
  images[current].classList.remove('active');
  current = (current + 1) % images.length;
  images[current].classList.add('active');
});
</script>

使用第三方库（Swiper.js）

快速集成轮播功能

引入Swiper库,通过简单配置实现复杂效果（如分页器、导航箭头、触屏滑动）。

示例代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.css">
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img1.jpg" alt="图1"></div>
    <div class="swiper-slide"><img src="img2.jpg" alt="图2"></div>
    <div class="swiper-slide"><img src="img3.jpg" alt="图3"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.js"></script>
<script>
new Swiper('.swiper-container', {
  loop: true, // 循环模式
  autoplay: { delay: 3000 }, // 自动播放
  pagination: { el: '.swiper-pagination' }, // 分页器
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } // 导航按钮
});
</script>

方法对比表

相关问题与解答

问题1：如何让纯CSS滚动无缝循环？

解答：
在@keyframes中添加克隆第一张图片到末尾，并通过计算总宽度实现无缝衔接。

.slider { 
  width: 600px; / 3张图总宽度 /
}
.slider::after { 
  content: ''; 
  display: block; 
  width: 300px; / 单张图宽度 /
}

问题2：如何让移动端触摸滑动更流畅？

解答：

1. 使用touchstart和touchend监听手势；
2. 禁用默认行为（event.preventDefault()）；
3. 计算滑动距离判断方向。
   示例（Swiper.js已内置）：

   // Swiper自带阻尼效果和惯性滚动，无需额外