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

html图片轮番代码

admin
行业动态
2025-05-13
1

使用HTML+CSS/JS实现图片轮播：创建容器包裹多张图片，通过CSS定位叠加显示，结合定时器或点击事件控制图片切换，添加

基础结构与样式

部分	代码说明	作用
`.carousel`	轮播容器，设置宽度、高度和相对定位	定义轮播区域大小和位置基准
`.carousel-item`	单个图片项，绝对定位并堆叠	实现图片重叠，仅显示当前项
`.active`	当前显示的图片项	控制哪张图片可见
`.dot`	导航小圆点，用于手动切换	提供跳转到指定图片的交互

JavaScript 逻辑

功能模块	关键代码	说明
自动轮播	`setInterval(showNext, 3000)`	每3秒调用`showNext`切换图片
手动切换	`document.querySelectorAll('.dot').forEach(...)`	为每个导航点绑定点击事件，跳转到对应图片
状态更新	`currentIndex = (currentIndex + 1) % total`	循环计算当前图片索引
DOM操作	`document.querySelector('.carousel-item.active')`	获取当前显示的图片并移除`active`类

完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">图片轮播</title>
  <style>
    .carousel {
      position: relative;
      width: 600px;
      height: 400px;
      overflow: hidden;
    }
    .carousel-item {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s;
    }
    .carousel-item.active {
      opacity: 1;
    }
    .dots {
      text-align: center;
      margin-top: 10px;
    }
    .dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #bbb;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
    }
    .dot.active {
      background: #333;
    }
  </style>
</head>
<body>
<div class="carousel">
  <img src="image1.jpg" alt="图1" class="carousel-item active">
  <img src="image2.jpg" alt="图2" class="carousel-item">
  <img src="image3.jpg" alt="图3" class="carousel-item">
</div>
<div class="dots">
  <span class="dot active" data-index="0"></span>
  <span class="dot" data-index="1"></span>
  <span class="dot" data-index="2"></span>
</div>
<script>
  const items = document.querySelectorAll('.carousel-item');
  const dots = document.querySelectorAll('.dot');
  let currentIndex = 0;
  const total = items.length;
  function showNext() {
    items[currentIndex].classList.remove('active');
    dots[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % total;
    items[currentIndex].classList.add('active');
    dots[currentIndex].classList.add('active');
  }
  setInterval(showNext, 3000); // 自动轮播
  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      let index = parseInt(dot.getAttribute('data-index'));
      items[currentIndex].classList.remove('active');
      dots[currentIndex].classList.remove('active');
      currentIndex = index;
      items[currentIndex].classList.add('active');
      dots[currentIndex].classList.add('active');
    });
  });
</script>
</body>
</html>