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

Question

我正在制作一个循环幻灯片，它在页面加载时执行并永远持续。有三张幻灯片。我希望每张幻灯片都在那里停留5秒钟，然后父div向左偏移-[width of slide]px以显示下一张幻灯片。最初，我制作了一些记录每个偏移值的东西，这很好，但当我尝试实现延迟时，控制台会吐出所有偏移值。我希望每5秒钟出现一次。我意识到这可能不是一个伟大的设计，但我正在学习。

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

如果目标是学习，那么让我这样解释：

您在for循环中设置了3个不同的timeOut函数，以便在5秒后运行这不会让你在5、10和15秒时分别延迟3次无论最后设置哪一个，您自然得到的偏移值也将是其乘数。

因此，使用此逻辑，您将不得不在计时器中设置单独的两半作为5000、10000和15000。

但我已经为您简化了一些代码。此代码可以帮助您正确学习。请复习、测试它，并随时询问您是否陷入困境。

代码段

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>