多個幻燈片放在一個頁面

Question

您能請幫助使用基於下面的代碼的多個幻燈片。如果只有一個幻燈片顯示在頁面上，它工作正常，在其他情況下，我必須複製代碼多次，併爲元素提供不同的ID。有沒有解決方案來解決這個問題，而不需要複製代碼？

下面是從W3Schools的代碼：

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"; 
 
    dots[slideIndex-1].className += " active"; 
 
}

<div class="slideshow-container"> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">1/3</div> 
 
    <img src="img_nature_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Text</div> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">2/3</div> 
 
    <img src="img_fjords_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Two</div> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">3/3</div> 
 
    <img src="img_mountains_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Three</div> 
 
</div> 
 

 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
<a class="next" onclick="plusSlides(1)">&#10095;</a> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center"> 
 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
</div>

Answer 1

如果你想使用多個幻燈片相同的代碼，你可以添加參數showSlides功能

var slideIndex = 1; 

showSlides(slideIndex,"mySlides","dots"); 

function plusSlides(n,nSliders,nDots) { 
    showSlides(slideIndex += n,nSliders,nDots); 
} 

function currentSlide(n,nSliders,nDots) { 
    showSlides(slideIndex = n,nSliders,nDots); 
} 
function showSlides(n,nSliders,nDots) { 
    var i; 
    var slides = document.getElementsByClassName(String(nSliders)); 
    var dots = document.getElementsByClassName(nDots); 
    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"; 
    dots[slideIndex-1].className += " active"; 
} 

像這樣，你只能在HTML文件中改變函數的參數

HTML：

<div class="slideshow-container"> 

<div class="mySlides fade"> 
    <div class="numbertext">1/3</div> 
    <img src="img_nature_wide.jpg" style="width:100%"> 
    <div class="text">Caption Text</div> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext">2/3</div> 
    <img src="img_fjords_wide.jpg" style="width:100%"> 
    <div class="text">Caption Two</div> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext">3/3</div> 
    <img src="img_mountains_wide.jpg" style="width:100%"> 
    <div class="text">Caption Three</div> 
</div> 

<a class="prev" onclick="plusSlides(-1,'mySlides','dots')">&#10094;</a> 
<a class="next" onclick="plusSlides(1,'mySlides','dots')">&#10095;</a> 

</div> 
<br> 

<div style="text-align:center"> 
    <span class="dot" onclick="currentSlide(1,'mySlides','dots')"></span> 
    <span class="dot" onclick="currentSlide(2,'mySlides','dots')"></span> 
    <span class="dot" onclick="currentSlide(3,'mySlides','dots')"></span> 
</div>