Question

我再次提出与我的旋转木马相关的另一个问题。目前，除非用户通过图像容器下方的左箭头或右箭头与其交互，否则旋转木马不会执行任何操作。我试图添加一个函数，该函数将使幻灯片自动轻弹直到用户与这些箭头交互，此时此函数将停止。我知道这在我脑海中的代码中是如何工作的，我知道它可能与我的代码中的if / elseif语句有关，但我不知道从哪里开始尝试将此函数实现到我的现有代码中代码没有破坏。

这是我当前的代码，允许用户滚动幻灯片：

//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();
    });

这里是github存储库，用于衡量标准：https://github.com/Ardiaz/Stewart-Ehoff.com

提前致谢！

Answer 1

首先提取出更改幻灯片的功能。

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;

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

$('.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);

在用户与之互动之前，如何让我的轮播自动播放？

1 个答案: