手動幻燈片無法正常工作

Question

我正在修改本地蒙特梭利的網頁。我正在嘗試使用手動幻燈片腳本，但是，該頁面無法按預期工作。在不添加「onload」屬性的情況下，幻燈片中的每個圖像都會一次顯示。經檢查，我有一個錯誤，指出：「未捕獲的TypeError：無法讀取未定義的屬性'風格'。這是有問題的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長度爲零，因爲還沒有任何元素與類名mySlides：

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

移動你的腳本標籤幻燈片內容之後應該解決的問題，或移動showSlides(slideIndex)調用onload處理程序。