Question

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函数的问题，我想知道我在做什么/假设不正确。

Answer 1

我为了清洁而对代码进行了一些编辑，我还从transition删除了额外的.fadeIn，因为您已经将其slidesDiv>img作为其中的一部分。

在您的示例中，您的程序流程有点难以理解，并且您使用了许多变量，这些变量不清楚它们来自何处（如slides和myIndex）所以这是一部分之所以难以弄清楚它失败的原因。

希望我能正确理解你想要达到的目标，以下内容应该适合你。它在可读性方面绝对不是最好的，您可以将一些嵌套的setTimeout提取到其他函数中，但我不想修改太多的初始代码：

＆＃13;

var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function() {
  slides = document.querySelectorAll(".mySlides");
  slidePictures(slides);
}

function slidePictures(slides) {
  var time = 0;
  slides.forEach((slide) => {
    setTimeout(() => {
      slide.style.display = "block";
      slide.className += " fadeIn";
      setTimeout(function() {
        slide.className = "mySlides";
        setTimeout(function() {
          slide.style.display = "none";
        }, 1000);
      }, 2000);
    }, time);
    time += 4000;
  });
}

＆＃13;

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

＆＃13;

请参阅此笔获取完整示例：http://codepen.io/rarmatei/pen/apramB

Answer 2

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>

Answer 3

很难说出你要从代码中实现的目标。我假设您希望图片淡入，并在一定延迟后再次淡出？为此我强烈建议你使用jQuery。这是我制作的fiddle。 slidePictures函数现在看起来像这样：

    function slidePictures() {
      $(".mySlides").each(function(element){
      console.log(this);
      // 2000 is the duration of the fading in milliseconds
      $(this).fadeIn(2000, function(){
        // fadeout is delayed 4000 milliseconds
        $(this).delay(4000).fadeOut(2000);
        });
      });
    }

如果这不是您所需要的，请提供其他信息。

grwag

setTimeout与css无法正常工作

3 个答案: