Diaporama automatique avec le bouton

Question

Je pourrais créer le diaporama automatique avec un javascript. Mais je le veux non seulement manuel, mais contrôle avec des boutons.

J'ai ajouté un code de contrôle manuel. Ensuite, le diaporama ne fonctionnait pas correctement. C'est le code pour le diaporama automatique. Comment modifier cela pour travailler avec des boutons.

var slideIndex = 0; 
 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex> slides.length) {slideIndex = 1}  
 
    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"; 
 
    setTimeout(showSlides, 8000); // Change image every 8 seconds 
 
}

#slide{ 
 
\t width:96%; 
 
\t } 
 
\t 
 
* { 
 
\t box-sizing: border-box 
 
} 
 

 
.mySlides { 
 
\t display: none 
 
} 
 

 
.slideshow-container { 
 
\t width: 1200px; 
 
\t position: relative; 
 
\t margin: -10px; 
 

 
} 
 
/* Next & previous buttons */ 
 
.prev, .next { 
 
\t cursor: pointer; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t width: auto; 
 
\t padding: 16px; 
 
\t margin-top: -22px; 
 
\t color: white; 
 
\t font-weight: bold; 
 
\t font-size: 18px; 
 
\t transition: 0.6s ease; 
 
\t border-radius: 0 3px 3px 0; 
 
} 
 
/* Position the "next button" to the right */ 
 
.next { 
 
\t right: 0; 
 
\t border-radius: 3px 0 0 3px; 
 
} 
 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, .next:hover { 
 
\t background-color: rgba(0,0,0,0.8); 
 
} 
 
/* Caption text */ 
 
.text { 
 
\t color: #f2f2f2; 
 
\t font-size: 15px; 
 
\t padding: 8px 12px; 
 
\t position: absolute; 
 
\t bottom: 8px; 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
/* The dots/bullets/indicators */ 
 
.dot { 
 
\t cursor: pointer; 
 
\t height: 13px; 
 
\t width: 13px; 
 
\t margin: 0 2px; 
 
\t background-color: #bbb; 
 
\t border-radius: 50%; 
 
\t display: inline-block; 
 
\t transition: background-color 0.6s ease; 
 
} 
 
.active, .dot:hover { 
 
\t background-color: #717171; 
 
} 
 
/* Fading animation */ 
 
.fade { 
 
\t -webkit-animation-name: fade; 
 
\t -webkit-animation-duration: 2s; 
 
\t animation-name: fade; 
 
\t animation-duration: 2s; 
 
} 
 
@-webkit-keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
} 
 

 
@keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
} 
 

 
/* On smaller screens, decrease text size */ 
 
@media only screen and (max-width: 300px) { 
 
    .text {font-size: 11px} 
 
}

<div id="slide"> 
 
    <div class="slideshow-container"> 
 
    <div class="mySlides fade"> <img src="../Images/girl.jpg" style="width:100%"> </div> 
 
    <div class="mySlides fade"> <img src="../Images/bride.jpg" style="width:100%"> </div> 
 
    <div class="mySlides fade"> <img src="../Images/academy.jpg" style="width:100%"> </div> 
 
    <div class="mySlides fade"> <img src="../Images/makeup.jpg" style="width:100%"> </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> 
 
    <span class="dot" onclick="currentSlide(4)"></span> 
 
    </div>

Answer 1

Vous n'avez pas fait les fonctions pour faire bouger curseur sur le bouton clic,

J'ai ajouté quelques instructions qui font le travail de curseur pour les points et les boutons gauche à droite, voir l'extrait ci-dessous , veuillez exécuter l'extrait en plein écran.

var slideIndex = 0; 
 
showSlides(); 
 
var slides,dots; 
 

 
function showSlides() { 
 
    var i; 
 
    slides = document.getElementsByClassName("mySlides"); 
 
    dots = document.getElementsByClassName("dot"); 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex> slides.length) {slideIndex = 1}  
 
    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"; 
 
    setTimeout(showSlides, 8000); // Change image every 8 seconds 
 
} 
 

 
function plusSlides(position) { 
 
    slideIndex +=position; 
 
    if (slideIndex> slides.length) {slideIndex = 1} 
 
    else if(slideIndex<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"; 
 
    } 
 
} 
 

 
function currentSlide(index) { 
 
    if (index> slides.length) {index = 1} 
 
    else if(index<1){index = 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[index-1].style.display = "block"; 
 
     dots[index-1].className += " active"; 
 
    } 
 
}

#slide{ 
 
\t width:96%; 
 
\t } 
 
\t 
 
* { 
 
\t box-sizing: border-box 
 
} 
 

 
.mySlides { 
 
\t display: none 
 
} 
 

 
.slideshow-container { 
 
\t width: 1200px; 
 
\t position: relative; 
 
\t margin: -10px; 
 

 
} 
 
/* Next & previous buttons */ 
 
.prev, .next { 
 
\t cursor: pointer; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t width: auto; 
 
\t padding: 16px; 
 
\t margin-top: -22px; 
 
\t color: white; 
 
\t font-weight: bold; 
 
\t font-size: 18px; 
 
\t transition: 0.6s ease; 
 
\t border-radius: 0 3px 3px 0; 
 
} 
 
/* Position the "next button" to the right */ 
 
.next { 
 
\t right: 0; 
 
\t border-radius: 3px 0 0 3px; 
 
} 
 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, .next:hover { 
 
\t background-color: rgba(0,0,0,0.8); 
 
} 
 
/* Caption text */ 
 
.text { 
 
\t color: #f2f2f2; 
 
\t font-size: 15px; 
 
\t padding: 8px 12px; 
 
\t position: absolute; 
 
\t bottom: 8px; 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
/* The dots/bullets/indicators */ 
 
.dot { 
 
\t cursor: pointer; 
 
\t height: 13px; 
 
\t width: 13px; 
 
\t margin: 0 2px; 
 
\t background-color: #bbb; 
 
\t border-radius: 50%; 
 
\t display: inline-block; 
 
\t transition: background-color 0.6s ease; 
 
} 
 
.active, .dot:hover { 
 
\t background-color: #717171; 
 
} 
 
/* Fading animation */ 
 
.fade { 
 
\t -webkit-animation-name: fade; 
 
\t -webkit-animation-duration: 2s; 
 
\t animation-name: fade; 
 
\t animation-duration: 2s; 
 
} 
 
@-webkit-keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
} 
 

 
@keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
} 
 

 
/* On smaller screens, decrease text size */ 
 
@media only screen and (max-width: 300px) { 
 
    .text {font-size: 11px} 
 
}

<div id="slide"> 
 
    <div class="slideshow-container"> 
 
    <div class="mySlides fade"> <img src="http://www.menucool.com/slider/prod/image-slider-5.jpg" style="width:100%"> </div> 
 
    <div class="mySlides fade"> <img src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="width:100%"> </div> 
 
    <div class="mySlides fade"> <img src="http://www.menucool.com/slider/prod/image-slider-3.jpg" style="width:100%"> </div> 
 
    <div class="mySlides fade"> <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" style="width:100%"> </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> 
 
    <span class="dot" onclick="currentSlide(4)"></span> 
 
    </div>

Answer 2

Les points indicateurs ne fonctionnaient pas bien. J'ai fait une légère modification au Javascript, en ajoutant quelques parenthèses, et cela fonctionne mieux:

<script> 

var slideIndex = 0; 
showSlides(); 
var slides,dots; 

function plusSlides(position) { 
    slideIndex += position; 
    if (slideIndex > slides.length) {slideIndex = 1} 
    else if(slideIndex < 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"; 
    } 

function currentSlide(index) { 
    if (index > slides.length) {index = 1} 
    else if(index < 1){index = 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[index-1].style.display = "block"; 
     dots[index-1].className += " active"; 
    } 

function showSlides() { 
    var i; 
    slides = document.getElementsByClassName("mySlides"); 
    dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex> slides.length) {slideIndex = 1}  
    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"; 
    setTimeout(showSlides, 3000); // Change image every 3 seconds 
} 

</script>