所以我正在制作一个图像滑块,我希望能够在我的 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);
}
};
我正在尝试通过查看其他滑块的操作方式来编写此插件而不会“作弊”。我想按我的方式做,但也要正确。