SetTimeout funktioniert nicht wie mit CSS bestimmt

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>

Also mein Problem ist, dass das Bild in der ersten Zeit verblasst, aber dann später nicht ausgeblendet, auch nicht verschwinden?

Es ist definitiv ein Problem mit den setTimeout Funktionen und ich frage mich, was ich mache/falsch angenommen.

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

ich bearbeitet Code ein bisschen für Sauberkeit und ich entfernt auch die extra transition von .fadeIn wie Sie es bereits Teil slidesDiv>img hatte.

In Ihrem Beispiel ist Ihr Programmfluss ein wenig schwer zu verstehen, und Sie verwenden viele Variablen, die nicht klar sind, woher sie kommen (wie slides und myIndex), so dass dies ein Grund war, warum es schwierig war um herauszufinden, warum es scheiterte.

Hoffentlich habe ich richtig verstanden, was Sie erreichen wollten und das unten sollte für Sie arbeiten. Es ist definitiv nicht die beste in Bezug auf Lesbarkeit und Sie könnten einige der verschachtelten setTimeouts in andere Funktionen in der Lage zu extrahieren, aber ich wollte nicht zu viel von Ihrem ursprünglichen Code ändern:

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

Bitte sehen Sie dieses Bild Feder für vollständiges Beispiel: http://codepen.io/rarmatei/pen/apramB

Answer 3

es ziemlich schwer ist, zu sagen, was Sie versuchen, aus dem Code zu erreichen. Ich nehme an, dass die Bilder eingeblendet werden sollen und nach einer gewissen Verzögerung wieder ausgeblendet werden sollen. Dafür würde ich Ihnen sehr empfehlen, jQuery zu verwenden. Hier ist ein fiddle Ich habe gemacht. Die slidePictures Funktion würde jetzt gerade so aussehen:

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

Wenn das nicht das, was Sie benötigen, geben Sie bitte weitere Informationen.

grwag