javascript - 手动幻灯片无法正常工作

我正在为当地的蒙特梭利修改网页。我正在尝试使用手动幻灯片脚本，但是，该页面无法正常工作。在不添加“ onload”属性的情况下，一次显示幻灯片中的每个图像。经检查，我有一个错误指出：“未捕获的TypeError：无法读取未定义的属性'style'”。这是有问题的HTML部分：

<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 8</div>
      <img src="http://i.imgur.com/hOlkQyd.jpg" width = "800" height = "600"/>
      <div class="text">Caption One</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">2 / 8</div>
     <img src="http://i.imgur.com/79juKeU.jpg" width = "800" height = "600"/>
     <div class="text">Caption Two</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">3 / 8</div>
     <img src="http://i.imgur.com/54B3yvz.jpg" width = "800" height = "600"/>
     <div class="text">Caption Three</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">4 / 8</div>
     <img src="http://i.imgur.com/zsvuaoU.jpg" width = "800" height = "600"/>
     <div class="text">Caption Four</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">5 / 8</div>
     <img src="http://i.imgur.com/N2hgBtH.jpg" width = "800" height = "600"/>
     <div class="text">Caption Five</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">6 / 8</div>
     <img src="http://i.imgur.com/McQHME4.jpg" width = "800" height = "600"/>
     <div class="text">Caption Six</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">7 / 8</div>
     <img src="http://i.imgur.com/rOvbBlj.jpg" width = "800" height = "600"/>
     <div class="text">Caption Seven</div>
   </div>

   <div class="mySlides fade">
     <div class="numbertext">8 / 8</div>
     <img src="http://i.imgur.com/aX4kzGr.jpg" width = "800" height = "600"/>
     <div class="text">Caption Eight</div>
   </div>

   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
   <a class="next" onclick="plusSlides(1)">&#10095;</a>
 </div>

 <div style="text-align:center">
   <span class="dot active" onclick="currentSlide(1)"></span>
   <span class="dot" onclick="currentSlide(2)"></span>
   <span class="dot" onclick="currentSlide(3)"></span>
   <span class="dot" onclick="currentSlide(4)"></span>
   <span class="dot" onclick="currentSlide(5)"></span>
   <span class="dot" onclick="currentSlide(6)"></span>
   <span class="dot" onclick="currentSlide(7)"></span>
   <span class="dot" onclick="currentSlide(8)"></span>
 </div>

这是脚本：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n)
{
    showSlides(slideIndex += n);
}

function currentSlide(n)
{
    showSlides(slideIndex = n);
}

function showSlides(n)
{
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1;}
    if (n < 1) {slideIndex = slides.length;}
    for (i = 0; i < slides.length; i++)
    {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++)
    {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; /*Error appears here */
    dots[slideIndex-1].className += " active";
}

我做错了什么？

最佳答案

slides[slideIndex-1].style.display = "block"; /*Error appears here */

无法定义slides[slideIndex-1]的原因是，如果slideIndex - 1超出了slides的范围。最可能的原因是slides为空。如果您在页面内容之前而不是之后运行脚本，则可能会发生这种情况。这将导致该行的slides长度为零，因为还没有任何具有类名称mySlides的元素：

var slides = document.getElementsByClassName("mySlides");

在幻灯片内容之后移动脚本标签应该可以解决问题，或者在showSlides(slideIndex)处理程序中移动onload调用。

关于javascript - 手动幻灯片无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38285826/