Как написать al oop для автоматического c слайд-шоу?

Question

Я хочу добавить al oop в слайд-шоу, но я новичок в jQuery и не знаю, как это сделать. и вот коды:

$(function(){
    $("#slide_container").mouseout(function(){

        /*a loop here that change the images automatically when the mouse is not inside the div,
        get the index of the image and add to it like a for loop (i = 0; i < slides.length; i++) 
        but I still don't know which var should I add and how mouseout works.*/

    });

    $("#slide_container").mouseover(function(){
        $('#nextBtn').on('click', function(){
            console.log('clicked');
            var currentImg = $(".active");
            var nextImg = currentImg.next();

            if(nextImg.length){
                currentImg.removeClass('active').css('z-index', -10);
                nextImg.addClass('active').css('z-index', 10);
            }

        });

        $('#prevBtn').on('click', function(){
            console.log('clicked');
            var currentImg = $(".active");
            var prevImg = currentImg.prev();
            if(prevImg.length){
                currentImg.removeClass('active').css('z-index', -10);
                prevImg.addClass('active').css('z-index', 10);
            }

        })

Answer 1

вы можете использовать setInterval. чтобы выполнить кусок, если код непрерывно в течение инерционного интервала

, вы можете нажать на кнопки, чтобы переместить слайд

let s_interval = null;
const DELAY = 1000 //1s between each transition

$("#slide_container").mouseout(function(){
   const next_button = $('#nextBtn')
   s_interval = setInterval(()=> next_button.click(),DELAY)
});

$("#slide_container").mouseenter(function(){
   clearInterval(s_interval)
});