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

html图片自动轮播代码

admin
行业动态
2025-05-02
4

使用HTML/CSS构建轮播结构，CSS控制图片位置与过渡，JS通过setInterval定时切换active类实现自动轮播，

需求分析

实现网页中多张图片自动循环播放，支持手动切换与暂停功能，适用于广告展示、产品轮播等场景。

代码实现

HTML结构

<div class="carousel">
  <div class="images">
    <img src="image1.jpg" alt="图1">
    <img src="image2.jpg" alt="图2">
    <img src="image3.jpg" alt="图3">
  </div>
  <button class="prev">&lt;</button>
  <button class="next">&gt;</button>
</div>

CSS样式

.carousel {
  position: relative;
  width: 600px; / 容器宽度 /
  overflow: hidden; / 隐藏超出部分 /
}
.images {
  display: flex;
  transition: transform 0.5s; / 动画过渡效果 /
}
.images img {
  width: 600px; / 与容器同宽 /
  height: 400px; / 固定高度 /
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }

JavaScript逻辑

const carousel = document.querySelector('.carousel');
const images = carousel.querySelector('.images');
const prevBtn = carousel.querySelector('.prev');
const nextBtn = carousel.querySelector('.next');
let currentIndex = 0; // 当前显示图片索引
let timer;
// 自动轮播函数
function autoPlay() {
  timer = setInterval(() => {
    currentIndex = (currentIndex + 1) % images.children.length;
    updatePosition();
  }, 3000); // 每3秒切换一次
}
// 更新图片位置
function updatePosition() {
  images.style.transform = `translateX(-${currentIndex  100}%)`;
}
// 事件监听
prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex 1 + images.children.length) % images.children.length;
  updatePosition();
});
nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.children.length;
  updatePosition();
});
// 鼠标悬停暂停轮播
carousel.addEventListener('mouseenter', () => clearInterval(timer));
carousel.addEventListener('mouseleave', autoPlay);
// 初始化
autoPlay();

样式调整说明

参数	说明	示例值
`.carousel`宽度	控制轮播区域大小	`800px`
`transition`时长	调节切换动画速度	`1s`
图片高度	统一所有图片高度	`500px`
自动播放间隔	修改`setInterval`时间参数	`5000`

功能扩展建议

添加圆点指示器
在底部添加对应图片数量的小圆点，通过currentIndex同步高亮状态。

html图片自动轮播代码第1张

<div class="indicators"></div>

const indicators = document.querySelector('.indicators');
// 动态生成圆点
images.children.forEach((img, index) => {
  const dot = document.createElement('span');
  indicators.appendChild(dot);
  dot.classList.toggle('active', index === currentIndex);
});