Question

所以我正在创建一个图像滑块，我希望能够在我的自动播放计时器中使用clearInterval（），在我的init函数中，我已经为分页模块放置了click事件处理程序。我想这样做，所以当用户在自动播放期间点击一个点时，它不会破坏图像旋转。问题是计时器功能在我的播放功能中，而不在我的init功能中。见下文：

function Plugin( element, options ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this.item = 0;
    this.init();
}

Plugin.prototype = {

    init: function() {

        var base = this;

        if ( this.options.legend === "on" ) {
            html = "<div id='legend'/>";
            $(this.element).append(this.generateLegend(this.options.images)).find(".img-number").click(function(){

                // store index of currently active image
                base.item = $("#img-container").children(".active").index();

                // only animate if the new index is different from the current
                if ( base.item !== $(this).index() ) {

                    // call animation effect
                    base.move(base.item, $(this).index());

                    // add active class to selected index and remove any previous active classes from other indices
                    base.updateIndex("#legend", $(this).index());
                    base.updateIndex("#img-container", $(this).index());

                }

            }).wrapAll(html);
        if ( this.options.autoplay === "on" ) {
            base.play();
        }

        return this;

    },

    updateIndex: function(el, index) {
        $(el).children().eq(index).addClass("active").siblings().removeClass("active");
    },

    play: function() {

        var base = this;

        setInterval(function() {

            if ( base.item === base.options.images.length-1 ) {
                base.updateIndex("#img-container", 0);
                base.updateIndex("#legend", 0);
                base.move(base.item, 0);
                base.item = 0;
            }
            else {
                base.updateIndex("#img-container", base.item+1);
                base.updateIndex("#legend", base.item+1);
                base.move(base.item, base.item+1);
                base.item += 1;
            }

        }, base.options.pduration);

    },

    // animation effect for changing image indices
    move: function(cur, dest) {
        $("#img-container > img").animate({
            "right": "+=" + 100 * (dest-cur) + "%"
        }, this.options.aduration, this.options.easing);
    }

};

我正试图通过查看其他滑块如何做而不“欺骗”来编写此插件。我想按照我的方式去做，但也要正确。

Answer 1

只需将时间间隔保存在base var：this.intervalTimer = window.setInterval( ... );中，然后随时随地访问。

Answer 2

setInterval()和setTimeout()都返回一个整数，可以与clearTimeout()和clearInterval()一起使用，用于取消间隔/超时。

在对象实例中保存返回的整数，并在检测到用户交互时取消间隔/超时。

clearInterval On Image Slider插件

2 个答案: