javascript - jCarouselLite 重置自动滚动间隔

Question

如何重置 jCarouselLite 上的自动滚动间隔？在某个事件之后轮播，以便它可以让您查看整个时间间隔的内容，而不管您单击下一个或上一个时计时器已经走了多远？现在，如果我在 9 秒后单击下一个或上一个，它会在 1 秒后再次滚动。

在jCarouselLite source code第 274-277 行是使用 setInterval 实现自动滚动的地方。我知道如果你有 setInterval 返回的 ID，你可以使用 clearInterval，但除了修改源代码之外我无法获得任何 ID，我不想那样做。

有什么想法吗？谢谢!

Answer 1

jCarouselLite 本身没有提供任何简单的方法来停止自动滚动，这是一个更容易的问题，然后做你想做的事(？我理解的对吗:你只是想让自动滚动在点击和然后继续)

Hacky + 完全停止自动滚动的潜在错误方法

var x; //hold interval id
$(function() {
    var y = window.setInterval; //backup original setInterval function
    //overwrite with new function which stores the id for us
    window.setInterval = function() {
        x = y(arguments[0], arguments[1]);
        return x; 
    };
    //now construct carousel
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        auto: 500 
    });
    //now restore original setInterval function
    //as we only needed the custom one for the carousel to capture the hidden
    //internal call to setInterval
    window.setInterval = y;
});
$("#stopAutoScrollButton").click(function() {
    clearInterval(x);
});

---

真正的解决方案

由于我们无法让 jCarouselLite 自行执行此操作，因此我们自己模拟了 auto 行为。

$(function() {
    var autoTime = 5000; //5s
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
    //simulate autoscroll by simulating "click" on next link
    var x = setInterval("$('.next').trigger('click');", autoTime);
    //if stopAuto is clicked the autoscroll is suspended for autoTime
    //no matter how far along the timer already was
    $("#stopAuto").click(function() {
        clearInterval(x);
        x = setInterval("$('.next').trigger('click');", autoTime);
    });
});