Javascript 在用户与旋转木马交互之前，如何使旋转木马自动播放？

目前，除非用户通过图像容器下方的左箭头或右箭头与其交互，否则旋转木马不会执行任何操作。我正在尝试添加一个函数，该函数将使幻灯片自动弹出，直到用户与这些箭头交互，然后该函数将停止

下面是允许用户滚动幻灯片的当前代码：

//Next Arrow Functionality
    $('.arrow-next').click(function (e) {

        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        if (nextSlide.length == 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();
        }

        currentSlide.fadeOut(1000).removeClass('active-slide');
        nextSlide.fadeIn(1000).addClass('active-slide');

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');

        e.preventDefault();
    });
    //Previous Arrow Click Functionality
    $('.arrow-prev').click(function (e) {

        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();

        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        if (prevSlide.length == 0) {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }


        currentSlide.fadeOut(1000).removeClass('active-slide');
        prevSlide.fadeIn(1000).addClass('active-slide');

        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
        e.preventDefault();
    });

---

提前谢谢

首先提取要更改幻灯片的函数

function nextSlide () {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if (nextSlide.length == 0) {
        nextSlide = $('.slide').first();
        nextDot = $('.dot').first();
    }

    currentSlide.fadeOut(1000).removeClass('active-slide');
    nextSlide.fadeIn(1000).addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
}

function prevSlide () {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if (prevSlide.length == 0) {
        prevSlide = $('.slide').last();
        prevDot = $('.dot').last();
    }


    currentSlide.fadeOut(1000).removeClass('active-slide');
    prevSlide.fadeIn(1000).addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
}

还要创建一个新变量来跟踪用户是否已经交互

var userHasInteracted = false;

然后重构click处理程序以使用新创建的函数，并设置变量

$('.arrow-next').click(function (e) {
    e.preventDefault();
    userHasInteracted = true;
    nextSlide();
});
$('.arrow-prev').click(function (e) {
    e.preventDefault();
    userHasInteracted = true;
    prevSlide();
});

然后添加逻辑以自动推进幻灯片

function autoAdvance () {

    // Stop the loop if the user has interacted
    if (userHasInteracted) return ;

    // Jump to the next slide
    nextSlide();

    // Run me again in 8 seconds
    setTimeout(autoAdvance, 8000);
}

// Advance the slide in 8 seconds
setTimeout(autoAdvance, 8000);

---

你是一个巫师，谢谢你以一种我能理解正在发生的事情的方式详细说明这一点。非常感谢。：）没问题，很高兴我能帮上忙：）如果你想有点挑战并进一步改进你的代码；尝试将

nextSlide

和

prevSlide

重构为一个函数。这本书有很多共同之处，应该很直截了当。当然！我会调查的。网站即将完成，重构是下一个任务。：）