-3

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

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

};

我正在尝试通过查看其他滑块的操作方式来编写此插件而不会“作弊”。我想按我的方式做,但也要正确。

4

2 回答 2

1

只需将间隔保存在basevar:中this.intervalTimer = window.setInterval( ... );,然后在您想要的任何地方访问它。

于 2013-07-21T06:29:10.473 回答
0

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

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

于 2013-07-21T06:30:38.727 回答