bootstrap+JavaScript实现堆叠式轮播图效果

要实现堆叠式轮播图效果，可以使用以下步骤：

1. 在 HTML 中创建一个容器，用于显示轮播图和导航按钮。

<div class="slider">
  <div class="slider-container">
    <div class="slide active">
      <img src="slide1.jpg">
    </div>
    <div class="slide">
      <img src="slide2.jpg">
    </div>
    <div class="slide">
      <img src="slide3.jpg">
    </div>
  </div>
  <div class="slider-nav">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>

2. 使用 CSS 设置容器和轮播图的样式。

.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-nav button {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
}

.slider-nav button:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

3. 使用 JavaScript 实现轮播图的切换和导航按钮的功能。

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

function prevSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
}

var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');

prevButton.addEventListener('click', function() {
  clearInterval(slideInterval);
  prevSlide();
  slideInterval = setInterval(nextSlide, 5000);
});

nextButton.addEventListener('click', function() {
  clearInterval(slideInterval);
  nextSlide();
  slideInterval = setInterval(nextSlide, 5000);
});

在上面的代码中，我们首先获取轮播图中的所有幻灯片和当前幻灯片的索引。然后，我们使用 setInterval 函数来定时调用 nextSlide 函数，以便自动切换幻灯片。在 nextSlide 函数中，我们将当前幻灯片的 active 类移除，并将索引增加 1，以便选择下一个幻灯片。然后，我们将下一个幻灯片的 active 类添加回去，以便显示它。类似地，在 prevSlide 函数中，我们将当前幻灯片的 active 类移除，并将索引减少 1，以便选择上一个幻灯片。

最后，我们使用 addEventListener 函数为导航按钮添加单击事件监听器。在单击事件处理程序中，我们清除 setInterval 函数的定时器，以便停止自动切换幻灯片。然后，我们调用 prevSlide 或 nextSlide 函数，以便切换幻灯片。最后，我们使用 setInterval 函数重新启动自动切换幻灯片的定时器。