슬라이드 쇼가 처음부터 다시 반복되지 않게하려면 어떻게합니까?

현재 W3Schools.com에서 제공하는 샘플 코드를 기반으로 자바 스크립트로 슬라이드 쇼를 만들려고합니다. 그러나이 샘플 슬라이드 쇼에서는 마지막 페이지에서 다음 버튼을 누르면 1 페이지로 돌아갑니다. 마찬가지로 첫 번째 페이지에서 이전 버튼을 누르면 마지막 페이지로 이동합니다. 슬라이드 쇼를 어느 방향으로 돌지 말고 싶으므로 이전 버튼이 작동하지 않거나 첫 페이지에 존재하지 않고 다음 버튼이 작동하지 않거나 첫 페이지에 존재하지 않습니다. 내가 어떻게 그럴 수 있니?슬라이드 쇼가 처음부터 다시 반복되지 않게하려면 어떻게합니까?

(즉 내가 떨어져 일하고 있어요 무엇 때문에 코드는 W3Schools.com에서 제공하는 단지 샘플 코드입니다.)

<body> 
 

 
<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> 
 

 
<script> 
 
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"; 
 
} 
 
</script> 
 

 
</body>

출처

2017-04-24 kuwaly

스택 오버플로를 묻기 전에 JavaScript를 디버깅 해보십시오. 그것은'slideIndex'가 극단적으로 리셋되는 것을 보여 줬을 것입니다. –

그냥 리셋 코드를 제거하고 경우에 떠나 슬라이드보다 N < 1>

// if (n > slides.length) {slideIndex = 1} // code to check end  
// if (n < 1) {slideIndex = slides.length} // code to check beginning 

if (n>slides.length || n<1) return; // my addition to not execute if either

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

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

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides(n) { 
 
    var i, slides = document.getElementsByClassName("mySlides"); 
 

 
    if (n > slides.length || n < 1) return; 
 
    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"; 
 
}

<body> 
 

 
    <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>

출처

2017-04-24 17:10:07 mplungjan

해당 행을 제거하는 이유는 현재 색인 ('n')이 하위 경계 또는 상한 경계를 벗어 났는지 확인하는 것입니다. 이 경우 경계는 "첫 번째"및 "마지막"슬라이드입니다. "슬라이드 0"은 물론 마지막 슬라이드를 넘어서는 것도 없습니다. 따라서 두 줄은 슬라이드 수 (다시 'n')를 1의 시작 색인으로 다시 설정하거나 마지막 슬라이드 ('slide.length'끝에있는 슬라이드 번호)로 둘러 쌉니다. – armadadrive

완료 ........... – mplungjan

슬라이드 쇼가 처음부터 다시 반복되지 않게하려면 어떻게합니까?

답변

관련 문제