如何实现自动图片轮播？已实现初始显示但无法切换下一张的求助

我帮你排查了代码里的几个关键问题，这些问题直接导致了轮播无法正常工作：

主要问题点 #

• 类名不匹配：JS里你用document.getElementsByClassName("myslides")获取轮播项，但HTML里的类名是myslideshow，两者不一致导致JS找不到对应的元素。
• 变量拼写错误：代码里出现了slidesshow.length（多了一个s），应该是slideshow.length；还有slides[j].style.display = "none"这里，应该用slideshow[j]（因为你获取的元素集合存在slideshow变量里）。
• 缺少显示当前幻灯片的逻辑：你只写了隐藏所有幻灯片的代码，但没有将当前索引的幻灯片设置为显示状态。
• 未给对应指示器添加激活类：移除所有dot的active类后，没有给当前幻灯片对应的dot加上active类。
• 没有自动轮播的触发机制：Displayslides()只执行了一次，没有设置定时器来周期性调用函数实现自动切换。

修正后的完整代码 #

HTML部分（统一类名+补充指示器） #

<div class="slideshow-container">
  <div class="myslides fade">
    <img src="img_natural1.jpg" style="width:100%">
  </div>
  <div class="myslides fade">
    <img src="img_natural2.jpg" style="width:100%">
  </div>
  <div class="myslides fade">
    <img src="img_natural3.jpg" style="width:100%">
  </div>
  <!-- 添加轮播指示器 -->
  <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

JS部分（修复所有问题+添加自动轮播） #

var slides = 0;
// 初始化显示第一张，然后设置每3秒自动切换一次
Displayslides();
setInterval(Displayslides, 3000);

function Displayslides() {
  var j;
  var slideshow = document.getElementsByClassName("myslides");
  var dots = document.getElementsByClassName("dot");
  
  // 隐藏所有幻灯片
  for (j = 0; j < slideshow.length; j++) {
    slideshow[j].style.display = "none";
  }
  
  slides++;
  // 超出幻灯片数量后重置索引
  if (slides > slideshow.length) {slides = 1}
  
  // 显示当前幻灯片（注意DOM元素索引从0开始，所以要减1）
  slideshow[slides - 1].style.display = "block";
  
  // 移除所有指示器的激活状态
  for (j = 0; j < dots.length; j++) {
    dots[j].className = dots[j].className.replace(" active", "");
  }
  
  // 给当前幻灯片对应的指示器添加激活状态
  dots[slides - 1].className += " active";
}

可选CSS样式（优化轮播过渡效果） #

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.myslides {
  display: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

这样修改后，轮播会自动每3秒切换一张图片，指示器也会同步更新状态啦。

内容的提问来源于stack exchange，提问作者Dillins