需要帮助在自动播放的无限幻灯片中实现延迟

Question

I'm making a looping slideshow that executes when the page loads and continues forever. There are three slides. I'd like for each slide to sit there for 5 seconds, then the parent div offsets to the left by -[width of slide]px to show the next slide. Initially I made something that logs each offset value, which is good, but when I try implementing the delay, the console spits out all the offset values. I expected each one to appear every 5 seconds. I realize this probably isn't a great design, but I'm learning.

let children = document.getElementsByClassName('div');
let parent = document.getElementById('parent');
let offset = -200;
let loopInterval;

function loop() {
    for (let i = 0; i < children.length; i++) {
        setTimeout(function(){
            let newOffset = offset * i;    
            parent.style.transform = "translateX(" + newOffset + "px)";
            console.log(newOffset);
        }, 5000);
    }
}

function autoplaySlides() {
    loopInterval = setInterval(loop, 0);
}

window.onload = function() {
    autoplaySlides();
}

Answer 1

If the goal is to learn, So let me explain like this:

You set 3 different timeOut functions inside the for loop to run 5 seconds later . This will not give you 3 separate delays to run at 5, 10 and 15 seconds. Whichever of these is set last, the offset value you will naturally get will also be its multiplier.

So, with this logic, you will have to set up separate halves as 5000 , 10000 and 15000 in the timer.

But I've simplified the code a bit for you. This code can help you learn correctly. Please review, test it, and feel free to ask if you get stuck.

Code Snippet

 let children = document.getElementsByClassName('slide'); let parent = document.getElementById('parent'); let offset = -200; let loopInterval = 0; function loop() { console.log('Current Slide: ' + loopInterval); loopInterval = children.length - 1 > loopInterval? loopInterval + 1: 0; newOffset = loopInterval * offset; setTimeout(function() { parent.style.transform = "translateX(" + newOffset + "px)"; loop(); }, 5000); } window.onload = loop();

 .wrapper { width: 200px; margin-left: auto; margin-right: auto; overflow: hidden; } #parent { width: 600px; transition: all 1s; }.slide { box-sizing: border-box; height: 100px; padding: 30px; width: 200px; background: pink; float: left; }.slide:nth-child(2) { background: red; color: white; }.slide:nth-child(3) { background: brown; color: white; }

 <div class="wrapper"> <div id="parent"> <div class="slide">Slide 0</div> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> </div> </div>