我如何才能使我的旋转木马自动播放，直到用户与之交互

How can I make my carousel auto play until a user interacts with it?

本文关键字：用户 交互 自动播放 旋转木马 我的      更新时间：2023-09-26

目前，carousel不做任何事情，除非用户通过图像容器下面的左箭头或右箭头与它交互。我正在尝试添加一个函数，该函数将使幻灯片自动滑动，直到用户与这些箭头交互，在此之后，该函数将停止。

下面是允许用户滚动幻灯片的当前代码: 
//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);
相关文章：