jquery - 需要帮助让这个幻灯片创建一个循环，这样它就会超时，然后再返回

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 次后重新出现？
setTimeout 对这个不起作用吗？

.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