轮播图：手动操作与定时轮播，让图片动起来

手动轮播

1. 获取元素

   首先，我们需要获取轮播图的元素，包括大图、缩略图和文本。

2. 添加单击事件

   接下来，为缩略图添加单击事件。当单击缩略图时，当前被单击的缩略图高亮，文本需要动态变化，让大图相应的变化。

3. 实现上/下一张按钮

   如果想要实现上/下一张按钮，只需在单击事件中添加相应的逻辑即可。

定时器轮播

1. 创建定时器

   要实现定时器轮播，首先需要创建一个定时器。定时器每隔一段时间自动触发一次函数。

2. 在函数中实现轮播逻辑

   在定时器触发的函数中，实现轮播逻辑，包括切换当前显示的大图、高亮缩略图和更新文本描述。

示例代码

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" alt="Image 1">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>This is the first image.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>This is the second image.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" alt="Image 3">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>This is the third image.</p>
      </div>
    </div>
  </div>
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
</div>

const carousel = document.querySelector('.carousel');
const carouselItems = carousel.querySelectorAll('.carousel-item');
const carouselIndicators = carousel.querySelector('.carousel-indicators');

let currentSlideIndex = 0;

// Add click event listeners to the carousel indicators
carouselIndicators.addEventListener('click', (event) => {
  const target = event.target;

  if (target.tagName === 'BUTTON') {
    const slideIndex = parseInt(target.dataset.bsSlideTo);

    showSlide(slideIndex);
  }
});

// Function to show a specific slide
function showSlide(slideIndex) {
  // Hide the current slide
  carouselItems[currentSlideIndex].classList.remove('active');

  // Show the new slide
  carouselItems[slideIndex].classList.add('active');

  // Update the current slide index
  currentSlideIndex = slideIndex;
}

// Function to start the automatic slideshow
function startSlideshow() {
  setInterval(() => {
    showSlide((currentSlideIndex + 1) % carouselItems.length);
  }, 3000);
}

// Start the automatic slideshow
startSlideshow();

在本文中，我们介绍了如何使用 JavaScript、HTML 和 CSS 实现轮播图的手动操作和定时器轮播。通过提供详细的示例代码和说明，您可以轻松地将轮播图应用到您的网站或项目中，让您的网页更加生动和有趣。