css动画不能使用javascript代码

Question

我正在尝试使用基于w3 css的自动Javascript幻灯片放映，当您点击箭头时切换到手动模式。除此之外，在开始时，如果未点击前一个或下一个箭头，幻灯片将运行2个循环。在幻灯片播放的2个循环之前单击上一个或下一个箭头也会将幻灯片切换为手动。

问题在于W3Css衰落动画。如果我保留它，在自动循环结束时，幻灯片会保持淡入淡出状态，同时应保持静止。所以，我用下面的代码删除衰落动画 -

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

请点我在做什么错在动画没有与JavaScript的正常工作（请注意 - 我是新来的Javascript）。下面是完整的片段，包括删除动画代码 -

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

删除此，

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

和活动的幻灯片有条件地添加和删除褪色类，

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

查看片段

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>