图像滑块插件上的 clearInterval

问题描述

所以我正在制作一个图像滑块，我希望能够从我的 init 函数中清除我的自动播放计时器上的 clearInterval()，我已经在其中放置了分页模块的点击事件处理程序.我想这样做，因此当用户在自动播放期间单击一个点时，它不会破坏图像旋转.问题是计时器功能在我的播放功能中，而不在我的 init 功能中.见下文:

So I'm making an image slider and I'd like to be able to clearInterval() on my autoplay timer from within my init function where I've placed my click event handler for the pagination module. I want to do this so when the user clicks on a dot during autoplay it doesn't break the image rotation. The problem is that the timer functionality is within my play function which is not within my init function. See below:

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

};

我试图通过查看其他滑块的做法来编写这个插件而不会作弊".我想按照我的方式做，但也要正确.

I'm trying to write this plugin without "cheating" by looking at how other sliders do it. I want to do it my way, but also properly.

推荐答案

只需将区间保存在 base var: this.intervalTimer = window.setInterval( ... ); 并随时随地访问它.

Just save the interval in the base var: this.intervalTimer = window.setInterval( ... ); and access it where ever you want.

这篇关于图像滑块插件上的 clearInterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！