css 动画无法使用 javascript 代码

Question

我正在尝试基于 w3 css 制作带有淡入淡出动画的自动 Javascript 幻灯片，当您点击箭头时切换到手动。除此之外，开始时，如果没有点击上一个或下一个箭头，幻灯片将运行循环 2 次。在 2 个幻灯片循环结束之前单击上一个或下一个箭头也会将幻灯片切换为手动。

问题出在 W3 Css 淡入淡出动画上。如果我保留它，在自动循环结束时，幻灯片会保持淡入和淡出，而它应该保持静止。所以，我必须使用以下代码删除淡入淡出的动画 -

 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++;
  showDivs();
    
    }
  else {
  index = 1;
  showDivs();
   }
  }
      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 {
  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=""  target="_blank" title="slide1">
      <img class="" src="img01.jpg" style="width:100%">
      </a>
      <div class="w3-display-bottomleft w3-large  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> 
    <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   
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide5">Slide-5 (read 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
 });

并有条件地为活动幻灯片添加和删除淡入淡出 class，

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++;
  showDivs();
    
    }
  else {
  index = 1;
    // Here add the parameter for identify loop ends
  showDivs(true);
   }
  }
     
 },interval);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
  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=""  target="_blank" title="slide1">
      <img class="" src="img01.jpg" style="width:100%">
      </a>
      <div class="w3-display-bottomleft w3-large  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> 
    <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   
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide5">Slide-5 (read 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>

css 动画无法使用 javascript 代码

css animation not working with javascript code

javascript

slideshow

css-animations