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>
它是否解決您的問題,@FabMon? – camelsWriteInCamelCase
剛剛完成「拋光」我的幻燈片與一些平滑的不透明過渡。看起來很不錯。感謝您的幫助,我已將您的答案檢查爲正確答案。乾杯 – FabMon