не SetTimeout работает как задумано с CSS

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

Я редактировал свой код немного для чистоты и я также удалены дополнительные transition из .fadeIn, как вы уже его часть slidesDiv>img.

В вашем примере ваш поток программ немного трудно понять, и вы используете множество переменных, которые неясны, откуда они взяты (например, slides и myIndex), поэтому это было частью причины, по которой это было сложно чтобы понять, почему он терпит неудачу.

Надеюсь, я правильно понял, чего вы пытались достичь, и нижеследующее должно работать на вас. Это, безусловно, не самый лучший с точки зрения читаемости, и вы можете быть в состоянии извлечь некоторые из вложенных setTimeouts в другие функции, но я не хочу, чтобы изменить слишком много вашего исходного кода:

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

Пожалуйста, смотрите этот Pen для полного примера: 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