JQuery スライドショーがたくさんあることは承知していますが、自分でコーディングしていて、特に答えが見つからない障害に遭遇しました。
背景: ホバー/アウトで一時停止/再開する自動化された JQuery スライドショー プラグイン
問題: マウス入力でスライドショーを一時停止し、setInterval を再度起動する代わりに、マウス入力で setInterval の残りの時間を終了する方法。
解決策:これを行う唯一の方法は、メソッドを起動するのではなく、一時停止したアニメーションを適切な残りの部分で再開できるようにするマウスの動作を処理するために、遅延が付加された自己呼び出しメソッドと stop() を使用することだと思いますまた?
あなたの考えは何ですか?
コードは次のとおりです。
(関数($){
var メソッド = {
init: 関数() {
var cycle = window.setInterval(methods.automate, 1000);
$('.slider_control').on('クリック', 'スパン', 関数(){
Methods.automate( $(this).attr('slideNumber') );
});
$('.slider_master_container')
。の上({
'mouseenter': 関数() {
clearInterval(サイクル);
}、
'mouseleave': 関数() {
サイクル = window.setInterval(methods.automate, 1000);
}
});
}、
自動化: 関数( el ) {
var $active = $('.slide.active'),
$next = el ? $('.slide[slideNumber=' + el) : $active.nextOrFirst();
$next.css('z-index', 2);
$active.fadeOut(1500, function() {
$active.css('z-index', 1).show().removeClass('active');
$next.css('z-index', 3).addClass('active');
});
}
};
$.fn.smartSlider = 関数(メソッド) {
if (メソッド[メソッド]) {
メソッドを返す[ メソッド ].apply( this, Array.prototype.slice.call( 引数, 1 ));
} else if ( typeof メソッド === 'オブジェクト' || ! メソッド ) {
return methods.init.apply( this, 引数 );
} そうしないと {
$.error( 'メソッド ' + メソッド + ' は jQuery.smartSlider に存在しません' );
}
};
})( jQuery );