Wie stelle ich zwei Zeitüberschreitungen ein?

Question

Ich versuche, zwei getrennte Timeout-Zeiten in meinem Kurs zu haben (so dass 2 Dias schneller sind als die anderen). Ich habe alle meine Bilder bei 7 Sekunden, aber ich will meine "brands1slide" und "brands2slide" 3,5 Sekunden sein.

var slideIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, 7000); 
 
}

<div class="SlidesDiv" style="max-width:1024px"> 
 
    <img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" /> 
 
    <img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" /> 
 
    <img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" /> 
 
    <img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" /> 
 
</div>

Answer 1

Eine Möglichkeit, es zu tun, ist eine Reihe von Zeiten haben das Timeout für jede Folie spezifiziert:

var slideTimes = [7000, 3500, 3500, 7000]; 

Dann können Sie verwenden, eine gute Timeout zu wählen für jede Folie:

setTimeout(carousel, slideTimes[slideIndex - 1]); 

Codeschnipsel:

var slideTimes = [3500, 3500, 7000, 7000]; 
 
var slideIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, slideTimes[slideIndex - 1]); 
 
}

<div class="SlidesDiv" style="max-width:1024px"> 
 
    <img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" /> 
 
    <img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" /> 
 
    <img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" /> 
 
    <img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" /> 
 
</div>