jCarouselLite重置自动滚动间隔 [英] jCarouselLite reset autoscroll interval

问题描述

如何在某些活动后重置 jCarouselLite 轮播上的自动滚动间隔这样它可以让你查看完整间隔的内容，无论你在下一次或上一次点击时计时器有多远？现在，如果我在9秒后点击下一个或上一个，它会在1秒后再次滚动。

How can I reset the auto-scroll interval on my jCarouselLite carousel after some event so that it lets you look at the content for the full interval, regardless of how far along the timer was when you clicked next or previous? Right now, if I click next or previous after 9 seconds, it scrolls again after 1 second.

在 jCarouselLite源代码是使用 setInterval <实现自动滚动的地方/ code>。我知道你可以使用 clearInterval 如果你有setInterval返回的ID，但没有一个我可以在修改源代码之外，我不想要要做到这一点。

In the jCarouselLite source code on lines 274-277 is where the auto-scroll is implemented using setInterval. I know you can use clearInterval if you have the ID returned by setInterval, but there isn't one I can get outside of modifying the source code, and I don't want to do that.

任何想法？谢谢！

推荐答案

jCarouselLite本身没有提供任何简单的方法来停止自动滚动，这是一个更容易的问题然后做你似乎想要什么（？我理解这一点：你只想让自动滚动暂时停止点击然后继续）

jCarouselLite itself doesn't provide any easy way to stop the auto-scrolling, which is an easier problem then do what you seem to want (?did I understand this right: You just want the autoscroll to temporarily stop on click and then continue)

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

这篇关于jCarouselLite重置自动滚动间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！