幻灯片Javascript代码-页面在不使用JS的情况下可以正常工作，而不使用JS

所以我用HTML、CSS和JS制作了一个幻灯片。除非我添加了JS代码，否则一切都可以正常工作。 以下是HTML代码：

<div class="slideshow">
    <div class="slide-item bgimg" style="background-image: url('images/1.jpeg')">
      <div class="caption">
        <h2>Title</h2>
        <p>Some text here because you're not ready to give me content!</p>
        <button>Order Now</button>
      </div>
    </div>
    <div class="slide-item bgimg" style="background-image: url('images/2.jpeg')">
      <div class="caption">
        <h2>Title</h2>
        <p>Some text here because you're not ready to give me content!</p>
        <button>Order Now</button>
      </div>
    </div>
    <div class="slide-item bgimg" style="background-image: url('images/3.jpeg')">
      <div class="caption">
        <h2>Title</h2>
        <p>Some text here because you're not ready to give me content!</p>
        <button>Order Now</button>
      </div>
    </div>
    <div class="slide-item bgimg" style="background-image: url('images/4.jpeg')">
      <div class="caption">
        <h2>Title</h2>
        <p>Some text here because you're not ready to give me content!</p>
        <button>Order Now</button>
      </div>
    </div>
    <div class="slide-control">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

---

我哪里做错了？Javascript似乎导致了这些错误。在添加JS之前，我看到了4张带有标题的图片，但是在添加JS之后，所有的东西都消失了。我还包括了最新的jquery脚本。

主要问题是，实际显示幻灯片的代码处于此if条件内，因此在满足此条件之前不会显示任何内容：

  if(slideIndex > slides.length){
    slideIndex = 1;
    slides[slideIndex-1].style.display = 'block';
    dots[slideIndex-1].className = 'active';
}

另一个问题是如何修改类。请使用API安全地操作类

工作示例：

var slideIndex=0；
函数showSlide（）{
var slides=document.getElementsByClassName（'slide-item'）；
var dots=document.getElementsByClassName（'dot'）；
对于（变量i=0；i幻灯片长度）{
slideIndex=1；
}
幻灯片[slideIndex-1].classList.remove（'hidden'）；
点[slideIndex-1].classList.add（'active'）；
}
幻灯片（）；
var定时器=设置间隔（幻灯片，2000）
。幻灯片放映{
高度：200px；
宽度：500px；
背景颜色：绿色；
}
.隐藏{
显示：无；
}
.幻灯片项目{
高度：200px；
宽度：200px；
背景颜色：蓝色；
}
.主动{
高度：200px；
宽度：200px；
背景颜色：蓝色；
}

标题1
这里有一些文字，因为你还没有准备好给我内容

现在点菜
标题2
这里有一些文字，因为你还没有准备好给我内容

现在点菜
标题3
这里有一些文字，因为你还没有准备好给我内容

现在点菜
标题4
这里有一些文字，因为你还没有准备好给我内容

现在点菜
“导致这些错误”哪些错误？我没有看到任何元素id为
slide item
，这是一个类…当我删除JS脚本时，我可以看到4个带标题的图像。但是在添加JS之后，它只是一个白色的屏幕
var slides=document.getElementById（'slide-item'）应该是
var slides=document.getElementsByClassName（'slide-item'）（或
var slides=document.queryselectoral（'.slide项'）；
）已更改。getElementByID为.getElementByClassName仍不起作用。未捕获类型错误：无法读取幻灯片[slideIndex-1]上未定义的属性“classList”）。classList.remove（'hidden'）@user8579596运行上面的代码段—它没有这样的错误。
.slide-item{
   display:none;
}

  if(slideIndex > slides.length){
    slideIndex = 1;
    slides[slideIndex-1].style.display = 'block';
    dots[slideIndex-1].className = 'active';
}