javascript - 手动幻灯片无法按预期工作

Question

我正在为本地蒙台梭利改造网页。我正在尝试使用手动幻灯片脚本，但是页面没有按预期工作。在不添加“onload”属性的情况下，幻灯片中的每个图像都会立即显示。经检查，我收到一条错误消息:“未捕获类型错误:无法读取未定义的属性‘样式’”。这是有问题的 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";
}

我做错了什么？

Answer 1

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

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

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

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