html5中滚动图片

实现方式与代码示例

水平方向滚动图片

“` | 将多张图片横向排列在容器中 |
| CSS样式 | “`css
.scroll-container {
display: flex;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.scroll-container img {
width: %ignore_a_3%00px; / 单张图片宽度 /
flex-shrink: 0;
}
“` | 通过CSS动画实现水平滚动，循环播放 |
| 优化无缝滚动 | “`css
.scroll-container {
display: flex;
width: max-content; / 自适应内容宽度 /
}
.scroll-container::after {
content: ”;
display: block;
width: 300px; / 与图片等宽 /
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } / 总宽度的一半实现无缝 /
}
“` | 克隆最后一张图片到容器末尾，实现无缝衔接 |

垂直方向滚动图片

“` | 垂直排列图片 |
| CSS样式 | “`css
.vertical-scroll {
display: flex;
flex-direction: column;
height: 300px; / 容器高度 /
overflow: hidden;
animation: scroll-vertical 15s linear infinite;
}
@keyframes scroll-vertical {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
.vertical-scroll img {
height: 100%; / 单张图片高度 /
}
“` | 通过垂直动画实现图片向上滚动 |

JavaScript控制滚动

let index = 0;
const images = document.querySelectorAll(‘.manual-scroll img’);
setInterval(() => {
images.forEach(img => img.style.display = ‘none’);
images[index].style.display = ‘block’;
index = (index + 1) % images.length;
}, 3000); // 每3秒切换

| 手动切换按钮 | ```html
<button id="prev">上一张</button>
<button id="next">下一张</button>
<div class="manual-scroll">
  <img src="img1.jpg" style="display:block;">
  <img src="img2.jpg">
</div>
``` | 结合JS事件监听实现手动控制 |
---
# 使用第三方库（如Swiper.js）
| 步骤 | 代码示例 | 优势 |
|------|----------|------|
| 引入库文件 | ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.css">
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.js"></script>
``` | 快速实现丰富交互效果 |
| 初始化配置 | ```javascript
new Swiper('.swiper-container', {
  direction: 'horizontal', // 或vertical
  loop: true, // 循环模式
  autoplay: { delay: 3000 }, // 自动播放
  pagination: { el: '.swiper-pagination' }, // 分页器
});
``` | 支持触屏滑动、分页、导航等功能 |
---
 相关问题与解答
# 问题1：如何调整滚动速度？
解答：  
CSS动画：修改`animation`的`duration`值（如`animation: scroll 20s linear infinite;`）。  
JavaScript：调整`setInterval`的时间参数（如`setInterval(() => { ... }, 5000);`）。  
Swiper.js：通过`autoplay.delay`属性设置（如`autoplay: { delay: 5000 }`）。
# 问题2：如何实现鼠标悬停时暂停滚动？
解答：  
CSS方案：添加`hover`状态暂停动画：  
  ```css
  .scroll-container:hover {
    animation-play-state: paused;
  }

• JavaScript方案：监听mouseenter和mouseleave事件：

  const container = document.querySelector('.scroll-container');
  container.addEventListener('mouseenter', () => container.style.animationPlayState = 'paused');
  container.addEventListener('mouseleave', () => container.style.animationPlayState = '