だから私は画像スライダーを作成しています。ページネーション モジュールのクリック イベント ハンドラーを配置した init 関数内から、自動再生タイマーで clearInterval() を実行できるようにしたいと考えています。これを行いたいので、ユーザーが自動再生中にドットをクリックしても、画像の回転が壊れません。問題は、タイマー機能が init 関数内にない play 関数内にあることです。下記参照：
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);
}
};
他のスライダーがどのようにそれを行うかを見て、「ごまかす」ことなくこのプラグインを書こうとしています。私は自分のやり方でそれをやりたいと思っていますが、きちんともしています。