Question

我正在修改当地蒙台梭利的网页。我试图使用手动幻灯片脚本，但页面无法按预期工作。如果不添加“onload”属性，幻灯片中的每个图像都会立即显示。检查后，我有一个错误说明：“未捕获的TypeError：无法读取未定义的属性'样式'”。以下是有问题的HTML部分：

var data = new
{
    to = deviceId,
    notification = new
    {
        body = "This is the message",
        title = "This is the title",
        icon = "myicon"
    },
    priority = "high"
};

这是脚本：

<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>

我做错了什么？

Answer 1

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调用。

手动幻灯片显示不按预期工作

1 个答案: