Нужна помощь в создании этого слайдшоу, чтобы создать цикл, в котором время ожидания истекло, а затем снова

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