Javascript幻灯片一次显示所有幻灯片

<div class="slideshow">
  <div class="slide">幻灯片1的内容</div>
  <div class="slide">幻灯片2的内容</div>
  <div class="slide">幻灯片3的内容</div>
  <!-- 更多幻灯片内容 -->
</div>

.slideshow {
  width: 100%; /* 幻灯片容器的宽度 */
  height: 400px; /* 幻灯片容器的高度 */
  overflow: auto; /* 显示滚动条 */
  white-space: nowrap; /* 内容不换行 */
}

.slide {
  display: inline-block; /* 幻灯片横向排列 */
  width: 100%; /* 每个幻灯片的宽度 */
  height: 100%; /* 每个幻灯片的高度 */
}

// 在页面加载完成后执行
window.onload = function() {
  var slideshow = document.querySelector('.slideshow');
  var slides = slideshow.querySelectorAll('.slide');

  // 设置幻灯片容器的宽度
  slideshow.style.width = slides.length * 100 + '%';

  // 设置每个幻灯片的宽度
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.width = 100 / slides.length + '%';
  }
};