当前位置：首页 > 行业动态 > 正文

html滚动图片

admin
行业动态
2025-04-30
2602

实现HTML滚动图片可通过CSS动画或JavaScript控制轮播，常用方法包括 animation属性配合关键帧，或使用 setInterval定时切换图片，亦可引入Swiper等库实现交互轮播

纯CSS实现滚动效果

通过CSS动画让图片水平或垂直滚动,适用于简单场景。

水平滚动示例

<div class="scroll-container">
  <div class="scroll-wrapper">
    <img src="img1.jpg" alt="图1">
    <img src="img2.jpg" alt="图2">
    <img src="img3.jpg" alt="图3">
  </div>
</div>

.scroll-container {
  width: 300px; / 显示区域宽度 /
  overflow: hidden; / 隐藏超出部分 /
}
.scroll-wrapper {
  display: flex; / 横向排列图片 /
  animation: scroll 10s infinite linear; / 无限循环滚动 /
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } / 向左移动自身宽度 /
}

垂直滚动示例

修改flex方向为column，调整translateY值。

html滚动图片第1张

JavaScript手动轮播实现

通过JS控制图片切换,支持交互功能。

基础结构

<div class="carousel">
  <div class="images">
    <img src="img1.jpg" class="active">
    <img src="img2.jpg">
    <img src="img3.jpg">
  </div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

核心逻辑

const images = document.querySelectorAll('.images img');
let current = 0;
const switchImage = () => {
  images[current].classList.remove('active');
  current = (current + 1) % images.length;
  images[current].classList.add('active');
};
document.querySelector('.next').addEventListener('click', switchImage);
// 类似实现上一张按钮逻辑

CSS配合

.images {
  position: relative; / 定位父元素 /
}
.images img {
  position: absolute; / 重叠图片 /
  opacity: 0; / 默认隐藏 /
  transition: opacity 0.5s;
}
.images img.active {
  opacity: 1; / 显示当前图片 /
}

使用第三方库（Swiper.js）

快速实现复杂轮播效果,支持多种配置。

引入方式

<!-CDN链接 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

HTML结构

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img1.jpg"></div>
    <div class="swiper-slide"><img src="img2.jpg"></div>
    <div class="swiper-slide"><img src="img3.jpg"></div>
  </div>
  <!-分页器 -->
  <div class="swiper-pagination"></div>
  <!-导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

初始化配置

const swiper = new Swiper('.swiper-container', {
  loop: true, // 循环播放
  autoplay: { delay: 3000 }, // 3秒切换
  pagination: { el: '.swiper-pagination' }, // 底部指示器
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
});

方法对比表

特性	纯CSS	手动JS	Swiper.js
兼容性	IE10+	全浏览器支持	依赖现代浏览器
交互性	无	可自定义	开箱即用
性能	低（多图时）	中等	优化良好
维护成本	高	中	低
扩展性	差	强	极强