Comment empêcher un diaporama de revenir au début?

J'essaye actuellement de faire un diaporama en JavaScript basé sur l'exemple de code fourni sur W3Schools.com. Cependant, avec cet exemple de diaporama, lorsque le bouton suivant est pressé sur la dernière page, il revient à la première page. De même, lorsque le bouton précédent est pressé sur la première page, il va à la dernière page. Je veux que le diaporama ne soit pas en boucle dans les deux directions, donc le bouton précédent ne fonctionne pas ou n'existe pas sur la première page et le bouton suivant ne fonctionne pas ou n'existe pas sur la première page. Comment ferais-je cela?Comment empêcher un diaporama de revenir au début?

(Le code est juste le code fourni à partir W3Schools.com, parce que ce que je travaille hors de.)

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

Source

2017-04-24 kuwaly

Veuillez essayer et déboguer votre JavaScript avant de demander Stack Overflow. Cela vous aurait montré que 'slideIndex' est réinitialisé aux extrêmes. –

enlèverait juste le code de remise à zéro et laisser si n < 1 ou> que les lames

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

Source

2017-04-24 17:10:07 mplungjan

Il peut être utile d'ajouter que la raison de supprimer ces lignes est que vous vérifiez si l'index actuel ('n') est au-delà de la borne inférieure ou supérieure. Les limites sont la "première" et la "dernière" diapositive, dans ce cas. Il n'y a pas de "diapositive 0" et bien sûr rien au-delà de la dernière diapositive. Ainsi, ces deux lignes réinitialisaient votre compte de diapositives (encore une fois, 'n') à l'index de début de 1 ou l'enveloppant à la dernière diapositive (qui est le numéro de diapositive à la fin de' slide.length') – armadadrive

Terminé ........... – mplungjan

Comment empêcher un diaporama de revenir au début?

Répondre

Questions connexes