循环以在setInterval之后开始

Question

我有一个包含图像的列表，我要做的是每秒钟显示一张图像(同时保持之前的图像显示(，然后在显示完所有图像后，隐藏所有图像，然后重新开始该过程。我已经设法使用setInterval创建了我想要的效果，但我不知道如何隐藏所有图像并重新开始，而且列表中的图像数量会有所不同，所以数量未知。

这就是我目前拥有的

<ul id="slider">
<li><img src="images/image1.jpg" width="300px"/></li>
<li><img src="images/image2.jpg" width="200px"/></li>
<li><img src="images/image3.jpg" width="100px"/></li>
<li><img src="images/image1.jpg" width="50px"/></li>
<li><img src="images/image2.jpg" width="20px"/></li>
</ul>
$(document).ready(function () {

/*Slider*/
var slides = $("#slider > li > img");
$(slides).hide();
$(slides).parents("#slider>li:nth-child(1)").find("img").show();
var x = 1;
setInterval(function () {
$(slides).parents("#slider>li:nth-child(" + x + ")").find("img").show();
if (x == slides.length)
x = 1;
else
x++;
}, 1000);
/*End*/           
});

Answer 1

您已经具备将x重置为1的条件；使用相同的条件块来重置幻灯片放映的状态。然后，您可以使用以下几个辅助函数来减少重复：

$(document).ready(function() {
var slides = $("#slider > li > img");
function showImage(x) {
$(slides)
.parents("#slider>li:nth-child(" + x + ")")
.find("img")
.show();
}
var x;
function reset() {
x = 1;
$(slides).hide();
showImage(1);
}
reset();
setInterval(function() {
if (x > slides.length) {
reset();
} else {
showImage(x);
x++;
}
}, 1000);
});

Answer 2

创建函数并根据长度检查条件并隐藏图像。

$(document).ready(function() {
/*Slider*/
var slides = $("#slider > li > img");
var length = slides.length;
$(slides).hide();
$(slides).parents("#slider>li:nth-child(1)").find("img").show();
var x = 1;
setInterval(function() {
function loop() {
$(slides).parents("#slider>li:nth-child(" + x + ")").find("img").show();
if (x == slides.length + 1) {
$(slides).hide();
x = 1;
} else
x++;
}
loop();
return loop;
}, 1000);
/*End*/
});

#slider > li {
list-style: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="slider">
<li><img src="images/image1.jpg" width="300px" /></li>
<li><img src="images/image2.jpg" width="200px" /></li>
<li><img src="images/image3.jpg" width="100px" /></li>
<li><img src="images/image1.jpg" width="50px" /></li>
<li><img src="images/image2.jpg" width="20px" /></li>
</ul>

Answer 3

最简单的修复方法是添加一个简单的：

$(slides).hide()

当你到达幻灯片时。长度。

在我看来，一个更直观、更"简单"的解决方案是使用异步函数。

$(document.ready(() => {
let slides = $('slider>li>img');
$(slides).hide();
// Calling loop without await causes it to run without blocking the main function
loop(slides, 1000);
})
const loop = async (slides, duration) => {
slides.forEach(slide => {
$(slide).show();
// sleep for duration ms
await new Promise(r => setTimeout(r, duration));
}
// After looping through all slides, hide them
$(slides).hide();
}

如果你想无限期地循环"循环"函数，你可以创建一个新的异步函数：

const looploop = async (slides, duration) => {
// Using the await keyword will wait for the loop function to finish,
// And only then will it call it again.
// The trick here is that the waiting is in the async function scope
// so if you were to call looploop without await in the main function
// it wouldn't block it.
while(true) {
await loop(slides, duration);
}
}

js中的异步编程改变了您对像这样长时间运行的任务的看法。它允许您以迭代的方式编写非阻塞函数，使其变得"简单"one_answers"容易"。