一、简介：

1、目标：

通过视频学习与后续自己的练习，对轮播图功能实现有了更好的理解，并整理如下。

2、功能需求：

（1）轮播图会自动播放图片；

（2）点击左键盘按钮，图片向左边播放一张，以此类推，右侧同理；

（3）图片播放的同时，下面的小圆圈也会随之变化；

（4）点击小圆圈，可以播放相应的图片。

二、文件目录：

三、实现图片轮播功能：

1.HTML代码部分：

<html>
<head>
  <style>
    /* CSS 样式在这里定义 */
  </style>
</head>
<body>
    <div class="slideshow-container">
        <div class="slide">
            <img src="images/image1.jpg" alt="Image 1">
        </div>
        <div class="slide">
            <img src="mages/image2.jpg" alt="Image 2">
        </div>
        <div class="slide">
            <img src="images/image3.jpg" alt="Image 3">
        </div>
        <div class="slide">
            <img src="images/image4.jpg" alt="Image 4">
        </div>
        <div class="slide">
            <img src="images/image5.jpg" alt="Image 5">
        </div>

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


  <script>
    // JavaScript 代码在这里定义
  </script>
</body>
</html>

在 HTML 中，加入了三个轮播图项，并分别通过 img 标签设置了图片路径和 alt 属性，为了实现下方的小圆圈指示器，我们可以在HTML中加入一个 div 元素。

2.CSS代码部分：

    .slideshow-container {
      position: relative;
      margin: auto;
      width: 500px;
      height: 300px;
    }

    .slide {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .indicators {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

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

    .indicator.active {
      background-color: #000;
    }

代码中，首先定义了轮播图容器 .slideshow-container 和轮播图项 .slide 的样式。

3.JavaScript代码部分：

    var indicatorsContainer = document.querySelector('.indicators');
    var currentIndex = 0;

    function showSlide(index) {
      slides.forEach(function(slide) {
        slide.style.display = 'none';
      });

      slides[index].style.display = 'block';

      var indicators = document.querySelectorAll('.indicator');
      indicators.forEach(function(indicator) {
        indicator.classList.remove('active');
      });

      indicators[index].classList.add('active');
    }

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

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

    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowRight') {
        nextSlide();
      } else if (event.key === 'ArrowLeft') {
        previousSlide();
      }
    });

    showSlide(currentIndex);
    setInterval(nextSlide, 5000);

    // 生成指示器
    slides.forEach(function(_, index) {
      var indicator = document.createElement('div');
      indicator.classList.add('indicator');
      indicator.addEventListener('click', function() {
        currentIndex = index;
        showSlide(currentIndex);
      });

      indicatorsContainer.appendChild(indicator);
    });

    // 左右箭头按钮
    var leftButton = document.createElement('button');
    leftButton.innerText = '◀';
    leftButton.addEventListener('click', function() {
      previousSlide();
    });

    var rightButton = document.createElement('button');
    rightButton.innerText = '▶';
    rightButton.addEventListener('click', function() {
      nextSlide();
    });

    var slideshowContainer = document.querySelector('.slideshow-container');
    slideshowContainer.appendChild(leftButton);
    slideshowContainer.appendChild(rightButton);

通过 JavaScript 部分实现了轮播图的基本功能。首先，通过 querySelectorAll 获取到所有的轮播图像，并将它们隐藏（display: none）起来。然后，定义了 showSlide 函数，用来显示指定索引的轮播图项，同时隐藏其他的轮播图项。接着，定义了 nextSlide 和 previousSlide 函数，分别用于切换到下一张和上一张轮播图。监听了键盘按键事件，当按下箭头左键或右键时，调用对应的函数进行切换。

最后，通过调用 showSlide 函数显示初始的轮播图，然后使用 setInterval 定时执行 nextSlide 函数，以每隔5秒切换到下一张图片。

为了实现下方的小圆圈指示器，我们可以在HTML中加入一个 div 元素，并通过 JavaScript 动态生成对应的小圆圈。在 showSlide 函数中，我们可以添加代码来更新小圆圈的样式，以显示当前轮播图项的指示器。然后，通过监听小圆圈的点击事件，设置对应的索引，并调用 showSlide 函数切换到点击的轮播图。

这段代码通过 JavaScript 实现了图片轮播功能，并添加了左右箭头控制和指示器，可以通过键盘的左右箭头按键或点击箭头按钮进行控制。同时，图片会自动每 5 秒切换到下一张。

四、轮播图效果展示：

轮播图 .gif

5. 轮播图 | 青训营