Question

我试图创建一个滑块，当用户滚动靠近特定元素时执行该滑块。代码使用setTimeout从一步移动到另一步。问题是，如果用户点击.trigger，代码会执行最后一步并搞砸滑块。

JS：

/ Footer timeline
$(".trigger-1").click(function() {
    event.preventDefault();
    $(".trigger").removeClass('active');
    $(".step").removeClass('active');
    $(".contact-us").removeClass('active');
    $(this).addClass('active');
    $(".step-1").addClass('active');
});

$(".trigger-2").click(function() {
    event.preventDefault();
    $(".trigger").removeClass('active');
    $(".step").removeClass('active');
    $(".contact-us").removeClass('active');
    $(this).addClass('active');
    $(".step-2").addClass('active');
});

$(".trigger-3").click(function() {
    event.preventDefault();
    $(".trigger").removeClass('active');
    $(".step").removeClass('active');
    $(".contact-us").removeClass('active');
    $(this).addClass('active');
    $(".step-3").addClass('active');
});

$(".trigger-4").click(function() {
    event.preventDefault();
    $(".trigger").removeClass('active');
    $(".step").removeClass('active');
    $(".contact-us").removeClass('active');
    $(this).addClass('active');
    $(".step-4").addClass('active');
});

$(".trigger-5").click(function() {
    event.preventDefault();
    $(".trigger").removeClass('active');
    $(".step").removeClass('active');
    $(this).addClass('active');
    $(".step-5").addClass('active');
    $(".contact-us").addClass('active');
});

// Trigger the slider
var eventFired = false,
    objectPositionTop = $('.footer').offset().top - 100;

$(window).on('scroll', function() {
    var currentPosition = $(document).scrollTop();
    if (currentPosition > objectPositionTop && eventFired === false) {
        eventFired = true;

        // Automatic slider
        setTimeout(function() {
            $(".step-1").removeClass('active');
            $(".step-2").addClass('active');
        }, 3000);

        setTimeout(function() {
            $(".step-2").removeClass('active');
            $(".step-3").addClass('active');
        }, 6000);

        setTimeout(function() {
            $(".step-3").removeClass('active');
            $(".step-4").addClass('active');
        }, 9000);

        setTimeout(function() {
            $(".step-4").removeClass('active');
            $(".step-5").addClass('active');
            $(".contact-us").addClass('active');
        }, 12000);
    }
});

HTML：

<div class="slider">
    <div class="slider-text">
        <div class="container-l">
            <div class="text-1">
                <span class="step step-count step-1 active">Step 1</span>
                <span class="step step-count step-2">Step 2</span>
                <span class="step step-count step-3">Step 3</span>
                <span class="step step-count step-4">Step 4</span>
                <span class="step step-count step-5">Step 5</span>
                <h3 class="step step-title step-1 active">step</h3>
                <h3 class="step step-title step-2">step</h3>
                <h3 class="step step-title step-3">step</h3>
                <h3 class="step step-title step-4">step</h3>
                <h3 class="step step-title step-5">step</h3>
                <a class="contact-us modal-trigger" href="#">Contact us!</a>
            </div>
        </div>
    </div>
    <div class="timeline">
        <div class="container">
            <div class="step step-1 active"></div>
            <div class="step step-2"></div>
            <div class="step step-3"></div>
            <div class="step step-4"></div>
            <div class="step step-5"></div>
        </div>
    </div>
    <div class="timeline-steps">
        <div class="container">
            <a class="trigger step-1 trigger-1 active" href="#">1</a>
            <a class="trigger step-2 trigger-2" href="#">2</a>
            <a class="trigger step-3 trigger-3" href="#">3</a>
            <a class="trigger step-4 trigger-4" href="#">4</a>
            <a class="trigger step-5 trigger-5" href="#">5</a>
        </div>
    </div>
</div>

Answer 1

我认为你应该在共享范围中添加某种协调令牌 - 变量，指示用户是否中断了定义的场景。

var userInterrupted = false;

// when user make some action
userInterrupted = true;

然后为每个超时函数添加条件

setTimeout(
    function() 
    {
        if (userInterrupted) { return; }
        $(".step-2").removeClass('active');
        $(".step-3").addClass('active');
    }, 6000);

单击项目时停止执行代码

1 个答案: