Javascript 图像滑块插件上的clearInterval

因此，我正在制作一个图像滑块，并且我希望能够在我的init函数中的自动播放计时器上清除interval（），我已经将分页模块的单击事件处理程序放置在该函数中。我想这样做，当用户在自动播放过程中点击一个点时，它不会破坏图像旋转。问题是计时器功能在我的play函数中，而不是在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);
    }

};

函数插件（元素、选项）{
this.element=元素；
this.options=$.extend（{}，默认值，选项）；
这是默认值；
这个。_name=pluginName；
本项目=0；
this.init（）；
}
Plugin.prototype={
init:function（）{
var base=此；
如果（this.options.legend==“打开”）{
html=“”；
$（this.element）.append（this.generateLegend（this.options.images））.find（“.img number”）。单击（function（）{
//存储当前活动映像的索引
base.item=$（“#img容器”）.children（“.active”）.index（）；
//仅当新索引与当前索引不同时才设置动画
if（base.item！=$（this.index（））{
//调用动画效果
base.move（base.item，$（this.index（））；
//将活动类添加到所选索引中，并从其他索引中删除任何以前的活动类
base.updateIndex（“#legend”，$（this.index（））；
base.updateIndex（“#img容器“，$（this.index（））；
}
}).wrapAll（html）；
如果（this.options.autoplay==“打开”）{
base.play（）；
}
归还这个；
},
更新索引：函数（el，索引）{
$（el）.children（）.eq（index）.addClass（“活动”）.sildren（）.removeClass（“活动”）；
},
播放：函数（）{
var base=此；
setInterval（函数（）{
if（base.item===base.options.images.length-1）{
base.updateIndex（“img容器”，0）；
base.updateIndex（“#图例”，0）；
base.move（base.item，0）；
base.item=0；
}
否则{
base.updateIndex（“img容器”，base.item+1）；
base.updateIndex（“图例”，base.item+1）；
base.move（base.item，base.item+1）；
基本项+=1；
}
}，base.options.pduration）；
},
//用于更改图像索引的动画效果
移动：功能（当前、目标）{
$（“#img container>img”）。设置动画({
“右”：“+=”+100*（目的地电流）+“%”
}，this.options.adudation，this.options.easing）；
}
};

---

我试图通过查看其他滑块如何操作来编写此插件而不“作弊”。我想用我自己的方式来编写，但也要正确。

只需将间隔保存在

基中
var:
this.intervalTimer=window.setInterval（…）；
并在任何需要的地方访问它。
setInterval（）
和
setTimeout（）
两者都返回一个整数，可与
clearTimeout（）
和
clearInterval（）
一起使用，用于取消间隔/超时

将返回的整数保存在对象实例中，并在检测到用户交互时取消间隔/超时。
“作弊”是最好的学习方法！查看现有代码==作弊，让其他人解决问题！=作弊？问题是我会看到其他功能，我可能想在以后自己编写。我只想在这一特定问题上得到帮助。不。你所学的70%是通过阅读，30%是通过编写自己的代码。