한 페이지에 여러 개의 슬라이드 쇼가 있습니다.

Question

아래 코드를 기반으로 여러 슬라이드 쇼를 사용 하시겠습니까? 하나의 슬라이드 쇼 만 페이지에 있으면 잘 작동합니다. 다른 경우에는 코드를 여러 번 복사하고 요소에 다른 ID를 부여해야합니다. 코드를 복사하지 않고이를 해결할 수있는 솔루션이 있습니까? 여기

은 W3 스쿨에서 코드입니다 :

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 파일에서만 함수의 인수를 변경해야합니다.

012 3,516,

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>