setTimeout无法与CSS一起使用

A. L 发表于 Dev

A.L

var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function ()
{
  slides = document.getElementsByClassName("mySlides");
  slidePictures();
}



function slidePictures() {
  
  slides[myIndex].style.display = "block";
  slides[myIndex].className += " fadeIn";
  console.log(slides[myIndex]);
  
  
  setTimeout(function () 
  {
    slides[myIndex].className = "mySlides";
    console.log(slides[myIndex]);
    
    setTimeout(function () 
    {
      slides[myIndex].style.display = "none";
      console.log("display none");
    }, 1000);
    
  }, 2000);

  
  lastIndex = myIndex;
  myIndex++;
  if (myIndex >= 3)
    return;
  setTimeout(slidePictures, 4000);
}

.slidesDiv>img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  opacity: 0;
  transition: opacity 1s;
}

.fadeIn {
  opacity: 1 !important;
  transition: opacity 1s;
}

<div class="slidesDiv">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <img class="mySlides" src="//placehold.it/200x80/0bf">
  <img class="mySlides" src="//placehold.it/200x80/fb0">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <h1 id="indicator"> Indicator </h1>
</div>

所以我的问题是，图像第一次消失，但是之后又不消失，也不消失吗？

setTimeout函数肯定是有问题的，我想知道我在做什么/假设不正确。

提姆

var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function ()
{
  slides = document.getElementsByClassName("mySlides");
  slidePictures();
}



function slidePictures() {
  
  slides[myIndex].style.display = "block";
  slides[myIndex].className += " fadeIn";
  console.log(slides[myIndex]);
  
  
  setTimeout(function () 
  {
    slides[myIndex].className = "mySlides";
    console.log(slides[myIndex]);
    
    setTimeout(function () 
    {
      slides[myIndex].style.display = "none";
      console.log("display none");

      // Move indexes here
      lastIndex = myIndex;
      myIndex++;

    }, 1000);
    
  }, 2000);
 
  if (myIndex >= 3)
    return;
  setTimeout(slidePictures, 4000);
}

.slidesDiv>img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  opacity: 0;
  transition: opacity 1s;
}

.fadeIn {
  opacity: 1 !important;
  transition: opacity 1s;
}

<div class="slidesDiv">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <img class="mySlides" src="//placehold.it/200x80/0bf">
  <img class="mySlides" src="//placehold.it/200x80/fb0">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <h1 id="indicator"> Indicator </h1>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。