演示图

QQ录屏20231125190933 -original-original.gif
代码部分理解在注释里

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .carousel {
      position: relative;
      width: 600px;
      overflow: hidden;
      margin: auto;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      min-width: 100%;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }

    .slide img {
      width: 100%;
      height: auto;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      font-size: 24px;
      background: none;
      border: none;
      display: none;
    }

    .prev-btn {
      left: 10px;
    }

    .next-btn {
      right: 10px;
    }

    .dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #bbb;
      margin: 0 5px;
      cursor: pointer;
    }

    .dot.active {
      background-color: #717171;
    }
  </style>
</head>
<body>

<div class="carousel" onmouseover="showButtons()" onmouseout="hideButtons()">
  <div class="slides">
    <div class="slide">
      <img src="./微信图片_20230921224425.jpg" alt="Image 1">
    </div>
    <div class="slide">
      <img src="./微信图片_20230921224443.jpg" alt="Image 2">
    </div>
    <div class="slide">
      <img src="./微信图片_20230922211448.jpg" alt="Image 3">
    </div>
  </div>

  <button class="carousel-btn prev-btn" onclick="prevSlide()">❮</button>
  <button class="carousel-btn next-btn" onclick="nextSlide()">❮</button>

  <div class="dots" onclick="dotClick(event)">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

<script>
  const carousel = document.querySelector('.carousel');
  const slides = document.querySelector('.slides');
  const slideWidth = document.querySelector('.slide').offsetWidth;
  const dots = document.querySelectorAll('.dot');
  let currentIndex = 0;

  function showSlide(index) {
    const offset = -index * slideWidth;
    slides.style.transform = `translateX(${offset}px)`;

    // 切换小圆点的活动状态
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.children.length;
    showSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.children.length) % slides.children.length;
    showSlide(currentIndex);
  }

  function dotClick(event) {
    if (event.target.classList.contains('dot')) {
      const dotIndex = Array.from(event.target.parentNode.children).indexOf(event.target);
      currentIndex = dotIndex;
      showSlide(currentIndex);
    }
  }

  function showButtons() {
    document.querySelector('.carousel-btn').style.display = 'block';
  }

  function hideButtons() {
    document.querySelector('.carousel-btn').style.display = 'none';
  }

  // 设置自动轮播，每2秒切换一次
  let autoSlideInterval;

  function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide, 2000);
  }

  function stopAutoSlide() {
    clearInterval(autoSlideInterval);
  }

  // 页面加载完成后开始自动轮播
  startAutoSlide();
</script>
</body>
</html>
02.demo 轮播图

演示图

代码部分 理解在注释里

代码部分理解在注释里
