2017-11-10 357 views
1

我在原生JavaScript中製作了幻燈片,但下一個和上一個按鈕不起作用。分頁點也應該遵循相應的幻燈片。Javascript幻燈片控件不採取任何行動

當按下下一個按鈕時,下一張幻燈片應該顯示,等等。在devTools中,它顯示第一張幻燈片的樣式設置爲顯示,第一個點添加了活動類,但按下下一個/上一個按鈕時不會發生任何事情。

這裏是我的代碼:

window.onload = function() { 
document.getElementById("nextSlide").addEventListener("click",nextSlide()); 
document.getElementById("prevSlide").addEventListener("click",prevSlide());  

}; 

var slideIndex = 0; 

function nextSlide() { 
var slideList = document.getElementsByClassName("imgSlide"); 
var dots = document.getElementsByClassName("dots"); 
slideIndex += 1; 

if (slideIndex >= slideList.length) { 
    slideIndex = 0; 
} 

for(var i = 0; i < slideList.length; i++) { 
    slideList[i].style.display = "none";   
}  

for(var d = 0; d < dots.length; d++) { 
    dots[d].classList.remove("active"); 
} 

    slideList[slideIndex].style.display = "block"; 
    dots[slideIndex].classList.add("active"); 
    return false;  
} 

function prevSlide() { 
var slideList = document.getElementsByClassName("imgSlide"); 
var dots = document.getElementsByClassName("dots"); 
slideIndex -= 1; 

if (slideIndex < 0) (slideList.length - 1); 

for(var i = 0; i < slideList.length; i++) { 
    slideList[i].style.display = "none";      
    } 

for(var d = 0; d < dots.length; d++) { 
    dots[d].classList.remove("active"); 
} 

    slideList[slideIndex].style.display = "block"; 
    dots[slideIndex].classList.add("active"); 
} 

而我的HTML名爲功能addEventListener

<div id="slides-container"> 
<ul class="slides"> 
    <li class="imgSlide"><img 
    src="/BackOffice/viagens_header_images/blobid1508696899148.jpg" 
    alt="Alpine 
    Scenery" /></li> 
    <li class="imgSlide"><img 
    src="/BackOffice/viagens_header_images/blobid1509065118446.jpg" 
    alt="Kalte 
    Rinne" /></li> 
    <li class="imgSlide"><img 
    src="/BackOffice/viagens_header_images/blobid1508696913346.jpg" 
    alt="Adiltzgraben" /></li> 
    </ul> 
<div class="controls"><button type="button" id="prevSlide" role="button"> 
</button> 
<ul class="dot-navigation"> 
    <li class="dots"></li> 
    <li class="dots"></li> 
    <li class="dots"></li> 
</ul> 
<button type="button" id="nextSlide" role="button"></button></div> 
</div> 

回答

1

Listener參數必須是不帶引號和括號的函數名稱:

document.getElementById("nextSlide").addEventListener("click", nextSlide); 
document.getElementById("prevSlide").addEventListener("click", prevSlide); 

也是另一個小錯誤。取而代之的是線的if (slideIndex < 0) (slideList.length - 1); 必須是:

if (slideIndex < 0) { 
    slideIndex = slideList.length; 
} 

window.onload = function() { 
 
    document.getElementById("nextSlide").addEventListener("click", nextSlide); 
 
    document.getElementById("prevSlide").addEventListener("click", prevSlide); 
 

 
}; 
 

 
var slideIndex = 0; 
 

 
function nextSlide() { 
 
    var slideList = document.getElementsByClassName("imgSlide"); 
 
    var dots = document.getElementsByClassName("dots"); 
 
    slideIndex += 1; 
 

 
    if (slideIndex >= slideList.length) { 
 
    slideIndex = 0; 
 
    } 
 

 
    for (var i = 0; i < slideList.length; i++) { 
 
    slideList[i].style.display = "none"; 
 
    } 
 

 
    for (var d = 0; d < dots.length; d++) { 
 
    dots[d].classList.remove("active"); 
 
    } 
 

 
    slideList[slideIndex].style.display = "block"; 
 
    dots[slideIndex].classList.add("active"); 
 
    return false; 
 
} 
 

 
function prevSlide() { 
 
    var slideList = document.getElementsByClassName("imgSlide"); 
 
    var dots = document.getElementsByClassName("dots"); 
 
    slideIndex -= 1; 
 

 
    if (slideIndex < 0) { 
 
    slideIndex = slideList.length - 1; 
 
    } 
 

 
    for (var i = 0; i < slideList.length; i++) { 
 
    slideList[i].style.display = "none"; 
 
    } 
 

 
    for (var d = 0; d < dots.length; d++) { 
 
    dots[d].classList.remove("active"); 
 
    } 
 

 
    slideList[slideIndex].style.display = "block"; 
 
    dots[slideIndex].classList.add("active"); 
 
}
.imgSlide:not(:first-child) { 
 
    display: none; 
 
} 
 

 
.slides { 
 
    list-style-type: none; 
 
}
<div id="slides-container"> 
 
    <ul class="slides"> 
 
    <li class="imgSlide"><img src="http://via.placeholder.com/350x150" alt="350x150"></li> 
 
    <li class="imgSlide"><img src="http://via.placeholder.com/300x200" alt="300x200"></li> 
 
    <li class="imgSlide"><img src="http://via.placeholder.com/400x300" alt="400x300"></li> 
 
    </ul> 
 
    <div class="controls"> 
 
    <button type="button" id="prevSlide" role="button">Back</button> 
 
    <ul class="dot-navigation"> 
 
     <li class="dots"></li> 
 
     <li class="dots"></li> 
 
     <li class="dots"></li> 
 
    </ul> 
 
    <button type="button" id="nextSlide" role="button">Next</button></div> 
 
</div>

+0

它是否解決您的問題,@FabMon? – camelsWriteInCamelCase

+0

剛剛完成「拋光」我的幻燈片與一些平滑的不透明過渡。看起來很不錯。感謝您的幫助,我已將您的答案檢查爲正確答案。乾杯 – FabMon