的setTimeout不工作

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

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 2

我編輯你的代碼位的清潔度，我也從.fadeIn去除多餘的transition因爲你已經有它的slidesDiv>img一部分。

在你的例子中，你的程序流程有點難以理解，並且你使用了很多變量，這些變量不清楚它們來自哪裏（如slides和myIndex），所以這是難以理解的部分原因找出它失敗的原因。

希望我正確理解你想要達到的目標，下面的內容應該適合你。這肯定不是最好的可讀性方面，你可能能夠提取一些嵌套一個定時器到其他功能，但是我不想修改你太多的初始代碼：

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; 
 
    }); 
 
}

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

 
.fadeIn { 
 
    opacity: 1 !important; 
 
}

請參閱此筆爲完整的例子：http://codepen.io/rarmatei/pen/apramB

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