スライドショーを最初からループバックしないようにするにはどうすればよいですか？

私は現在、W3Schools.comで提供されているサンプルコードに基づいてJavaScriptでスライドショーを作成しようとしています。ただし、このサンプルスライドショーでは、最後のページで次のボタンが押されると、ページ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'が極端にリセットされることを示していました。 –

だけであればリセットコードを削除し、残してスライド

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

よりN < 1又は>

出典

2017-04-24 17:10:07 mplungjan

これらの行を削除する理由は、現在のインデックス（ 'n'）が下限か上限を超えているかどうかを確認することです。境界は、この場合は「最初」と「最後」のスライドです。「スライド0」はなく、もちろん最後のスライドを超えるものはありません。したがって、その2行はスライドのカウントを（再び 'n'）を先頭のインデックス1に戻していたか、または最後のスライド（' slide.length'の最後のスライド番号）にラップします。 – armadadrive

完了........... – mplungjan

スライドショーを最初からループバックしないようにするにはどうすればよいですか？

答えて

関連する問題