需要帮助使此幻灯片创建一个循环，以便超时然后重新计时

Question

所以我目前正在使用 jquery 创建一个幻灯片，我遇到的问题是制作一个重复循环，这将使幻灯片放映超时一定时间，即 10 分钟，然后让它重新出现并再次运行幻灯片，然后永远继续。我似乎无法获得任何工作。

$("#slideshow > div:gt(0)").hide();
setInterval(function(){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);

<link rel="stylesheet" type="text/css" href="assets/css/animations.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
            <div>
                <img src="https://i.imgur.com/rDI2jF4.png" alt="">
            </div>
            <div>
                <img src="https://i.imgur.com/DS5peX5.png" alt="">
            </div>
        </div>

因此，正如我所说，我能够启动并运行幻灯片，但需要知道在哪里可以找到有关在一定时间内安排幻灯片放映所需的时间的信息，然后将其带回以再次运行幻灯片。

Answer 1

所以你想让整个东西在 x 时间后消失并在 y 时间后重新出现？
设置超时对此不起作用吗？

.hidden { display: none; }
function myInterval(showInterval , hideInterval) {
    var elem = document.getElementById('slideshow');
    var targetInterval;
    if ((" " + elem.className + " " ).indexOf( " " + hidden + " " ) > -1) {
        elem.classList.remove('hidden');
        targetInterval = showInterval;
    } else {
        elem.classList.add('hidden');
        targetInterval = hideInterval;
    }
    setTimeout(function(){ myInterval(showInterval , hideInterval) }, targetInterval);
};
myInterval(showInterval , hideInterval);
// showInterval = how long the animation will be visible
// hideInterval = how long the animation will be hidden
// this will hide it at the start, and show it after the 'hide' interval
// to make it show from the start, add the 'hidden' class on the Element from the start

或者你可以使用 setInterval 代替，如果你想让它是显示/隐藏的同一周期：

setInterval(function(){
    document.getElementById('slideshow').classList.toggle('hidden');
}, x); // x is the time for how long the animation will be visible/hidden