如何使用Javascript将一组幻灯片相互定位？

<div id="slideshow">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

#slideshow {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

// 获取幻灯片容器和所有幻灯片元素
var slideshow = document.getElementById('slideshow');
var slides = Array.from(document.getElementsByClassName('slide'));

// 初始化第一个幻灯片为显示状态
slides[0].style.display = 'block';

// 幻灯片切换函数
function switchSlide(currentIndex, nextIndex) {
  // 隐藏当前幻灯片，显示下一个幻灯片
  slides[currentIndex].style.display = 'none';
  slides[nextIndex].style.display = 'block';
}

// 切换到下一个幻灯片
function nextSlide() {
  var currentIndex = slides.findIndex(function(slide) {
    return slide.style.display === 'block';
  });
  var nextIndex = (currentIndex + 1) % slides.length;
  switchSlide(currentIndex, nextIndex);
}

// 切换到上一个幻灯片
function previousSlide() {
  var currentIndex = slides.findIndex(function(slide) {
    return slide.style.display === 'block';
  });
  var previousIndex = (currentIndex - 1 + slides.length) % slides.length;
  switchSlide(currentIndex, previousIndex);
}

// 轮播定时器
var timer = setInterval(nextSlide, 2000);

// 停止轮播
function stopSlideShow() {
  clearInterval(timer);
}

// 开始轮播
function startSlideShow() {
  timer = setInterval(nextSlide, 2000);
}

// 绑定事件监听器
slideshow.addEventListener('mouseenter', stopSlideShow);
slideshow.addEventListener('mouseleave', startSlideShow);