0
J'essaie de faire un diaporama Javascript automatique basé sur w3 css qui passe en mode manuel lorsque vous appuyez sur les flèches. En outre, au début, si les flèches précédentes ou suivantes ne sont pas cliquées, le diaporama tournera pour 2 boucles.Espace blanc en cliquant sur les flèches dans le diaporama Javascript automatique
Lorsque la page est chargée, le diaporama est en mode automatisé. Cette fois, si nous cliquons sur la flèche précédente ou suivante, elle devrait s'arrêter à la diapositive à ce moment-là. Au lieu de cela, il montre un écran blanc qui a l'air laid. J'ajoute la variable pause pour essayer d'accomplir la fonction de pause en cliquant sur les flèches. S'il vous plaît dites ce que je fais mal. Note - Je suis très nouveau sur Javascript.
Ci-dessous est mon extrait -
var paused = false;
var myIndex = 0;
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 1000; //for testing purposes
function carousel() {
var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll
maxLength = x.length * loops; //times 2 for two loops
//optimalization here - borrowing Array forEach to loop over node list
Array.prototype.forEach.call(x, function(element) {
element.style.display = "none";
});
counter++; //adding counter
if (paused === false) {
if (myIndex >= x.length) {
myIndex = 0
}; //reset this to zero indexing
x[myIndex].style.display = "block"; //show the slide
if (counter <= maxLength) //ie counter <= 10, execute
{
myIndex++; //add index with every pass
setTimeout(carousel, interval);
Array.prototype.forEach.call(x, function(element) {
element.classList.remove("w3-animate-fading"); //remove the fading
});
}
}
else
{
}
}
carousel();
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
paused = true;
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}.w3-content.w3-display-container {
margin-top: 100px;
}
button.w3-button.w3-display-left.w3-black {
position: relative;
left: -50px;
}
button.w3-button.w3-display-right.w3-black {
position: relative;
right: -118px;
}<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container " style="max-width:150px">
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" \t target="_blank" title="slide1">
<img class="" src="img01.jpg" \t style="width:100%">
</a>
<div class="w3-display-bottomleft w3-large \t w3-container w3-
padding-16 w3-black">
<a href="" target="_blank" title="slide1">Slide-1 (read more)</a>
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide2">
<img class="" src="img02.jpg" style="width:100%">
</a> \t
<div class="w3-display-bottomright w3-large w3-container w3-padding-16
w3-black">
<a href="" target="_blank" title="slide2">Slide-2 (more)</a>
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide3">
<img class="" src="img03.jpg" style="width:100%">
</a>
<div class="w3-display-topleft w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide3">Slide-3 (read more)</a>
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide4">
<img class="" src="img04.jpg" style="width:100%">
</a>
<div class="w3-display-topright w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide4">Slide-4 (read more)</a>
</div>
</div>
<div class="w3-display-container w3-animate-fading mySlides">
<a href="" target="_blank" title="slide5">
<img class="" src="img05.jpg" style="width:100%">
</a>
<div class="w3-display-middle w3-large w3-container \t
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide5">Slide-5 (read \t more)</a>
</div>
</div>
<button class="w3-button w3-display-left w3-black"
onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black"
onclick="plusDivs(1)">❯</button>
</div>
S'il vous plaît préciser quel numéro vous manquent fixe. D'après ce que je comprends, vous voulez que le diaporama s'arrête une fois qu'ils cliquent sur la flèche suivante? –
Lorsque la page est chargée, le diaporama est en mode automatisé. Cette fois, si nous cliquons sur la flèche précédente ou suivante, elle devrait s'arrêter à la diapositive à ce moment-là. Au lieu de cela, il montre un écran blanc qui a l'air laid. @JaredBledsoe – user20152015
Et si vous utilisiez un setInterval() pour échanger des images, puis une fois qu'ils cliquaient sur la flèche que vous utilisiez clearInterval()? –