css animation ne fonctionne pas avec le code javascript

Question

J'essaie de faire un diaporama Javascript automatique avec une animation de fondu basée 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. Si vous cliquez sur les flèches précédentes ou suivantes avant que 2 boucles du diaporama ne soient terminées, le diaporama passe également en mode manuel.

Le problème est lié à l'animation de fondu W3 Css. Si je le garde, à la fin des boucles automatiques, les diapositives continuent à s'affaisser et à disparaître alors qu'il devrait rester statique. Donc, je dois enlever l'animation fading en utilisant le code suivant -

Array.prototype.forEach.call(x, function(element) { 
    element.classList.remove("w3-animate-fading"); //remove the fading 
    }); 

S'il vous plaît signaler ce que je fais mal que l'animation ne fonctionne pas correctement avec javascript (S'il vous plaît note - Je suis nouveau Javascript). Voici l'extrait complet, y compris le code de suppression d'animation -

var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 
var counter = 0; 
 
var maxLength = 0; 
 
var loops = 2; 
 
var interval = 2000; //for testing purposes 
 

 
var x = document.getElementsByClassName("slideShow"); 
 
maxLength = x.length * loops; //times 2 for two loops 
 
    
 
for (i=0; i<x.length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "block"; 
 

 
var slides = setInterval(function() { 
 
counter++; //adding counter 
 
    if (counter <= maxLength) //ie counter <= 10, execute 
 
    { 
 
    if (index < slideShow.length) { 
 
    
 
    index++; 
 
\t \t showDivs(); 
 
    
 
    } 
 
    else { 
 
\t \t index = 1; 
 
\t \t showDivs(); 
 
\t } 
 
    } 
 
     Array.prototype.forEach.call(x, function(element) { 
 
    element.classList.remove("w3-animate-fading"); //remove the fading 
 
    }); 
 
},interval); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
\t \t index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs() { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-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 slideShow"> 
 
     <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 slideShow"> 
 
     <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 slideShow"> 
 
     <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 slideShow"> 
 
     <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 slideShow"> 
 
     <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="control(-1)"><</button> 
 
     <button class="w3-button w3-display-right w3-black" onclick="control(1)">></button> 
 

 
</div>

Answer 1

Supprimer le,

Array.prototype.forEach.call(x, function(element) { 
element.classList.remove("w3-animate-fading"); //remove the fading 
}); 

et ajouter et supprimer la classe de fondu pour diapositive active conditionnelle,

slideShow[0].className = "w3-animate-fading slideShow"; 
slideShow[index-1].className = "w3-animate-fading slideShow"; 

Voir l'extrait

var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 
var counter = 0; 
 
var maxLength = 0; 
 
var loops = 2; 
 
var interval = 2000; //for testing purposes 
 

 
var x = document.getElementsByClassName("slideShow"); 
 
maxLength = x.length * loops; //times 2 for two loops 
 
    
 
for (i=0; i<x.length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "block"; 
 
slideShow[0].className = "w3-animate-fading slideShow"; 
 

 
var slides = setInterval(function() { 
 
counter++; //adding counter 
 
    if (counter <= maxLength) //ie counter <= 10, execute 
 
    { 
 
    if (index < slideShow.length) { 
 
    
 
    index++; 
 
\t \t showDivs(); 
 
    
 
    } 
 
    else { 
 
\t \t index = 1; 
 
    // Here add the parameter for identify loop ends 
 
\t \t showDivs(true); 
 
\t } 
 
    } 
 
     
 
},interval); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
\t \t index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs(value) { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-1].style.display = "block"; 
 
    
 
    if(value) { // Here check the condition if loop ends remove fade class from slide 
 
    
 
     slideShow[index-1].classList.remove("w3-animate-fading"); 
 
     
 
    } else { // otherwise add fade class to slide 
 
      
 
     slideShow[index-1].className = "w3-animate-fading"; 
 
     
 
     // after that remove class after some time for remove fade 
 
     setTimeout(function(){ 
 
      slideShow[index-1].classList.remove("w3-animate-fading"); 
 
     },1000); 
 
    } 
 
}

.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 slideShow"> 
 
     <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 slideShow"> 
 
     <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 slideShow"> 
 
     <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 slideShow"> 
 
     <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 slideShow"> 
 
     <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="control(-1)"><</button> 
 
     <button class="w3-button w3-display-right w3-black" onclick="control(1)">></button> 
 

 
</div>