JQueryプラグイン制作実践 xMarqueeプラグイン V1.0_jquery

プラグインの要件
1. リスト内の要素を左右に移動します (上下の方向は同じです。CSS を使用してリスト要素のフロート方向を制御します)
2.要素にマウスを移動します 要素が強調表示されると (CSS 制御されます)、プレーヤーはスクロールを停止します。離れた後もレースを続けてください。 。
3. オプションの左右の手動ナビゲーション ボタン。

実装の原則
リストの末尾の要素を最初の要素の前に移動するだけです。
将来の拡張 (将来必要になるかどうかを確認してください)
移動後のコールバック関数を使用すると、複数の要素が同時に移動します。アルバムプラグイン、興味があれば書き留めてください)。開発者は、「機能する可能性がある最も単純なことを実行してください!」という 1 つの文を覚えておく必要があります。最もシンプルで使いやすいものを作り、過剰なデザインはしないでください。
xMarquee API 説明
1. DOM 仕様
以下のソースコードを参照してください~ 2. CSS の例
以下のソースコードを参照してください~
3. メインメソッド呼び出し

コードをコピーします コードは次のとおりです。

プラグインのソースコード

コードをコピー

コードは次のとおりです。 (関数) ($) { // プライベート関数 . var p = {};

p.stop = function(evt) { if (evt) { $(this).addClass(p._opts.on) ); }; window.clearInterval(p._intervalID ) };

p.slide = function() {
if (p._opts.dir == 1) ":last").hide().fadeIn (p._opts.fadein).prependTo(p._t);
} else {
if (p._opts.vnum < p._cnt) {
p._i.filter(":first ").fadeOut(p._opts.fadeout).appendTo(p._t);
p._i.filter(":eq(" p._opts.vnum " )").fadeIn(p._opts.fadein );
} else {
p._i.filter(":first").hide().appendTo(p._t).fadeIn(p._opts .fadein);
};
p._i = $(p._opts.i, p._t); ._i.filter(":gt(" ( p._opts.vnum - 1) ")").hide()
}; //スライド
p.go = function(evt) {
p.stop();
if (evt) {
$(this).removeClass(p._opts.on);
p._intervalID = window.setInterval( ) { p.slide(); }, p ._opts.interval); //go
//メインのプラグイン本体
$.fn.xMarquee = function(options) {
// オプションを設定します。
options = $.extend({}, $.fn.xMarquee.defaults, options);
p._opts = options; // 一致した要素を調べて戻ります。 jQuery オブジェクト。
return this.each (function() {
//注: 複数のマーキー インスタンスをサポートしたい場合は、$(this).data("v",v) p._t = this; //マーキーターゲット;
//シルドアイテム
p._i = $(p._opts.i, p._t); .size();
p._intervalID = null;
//不要な項目を非表示
p._i.filter(":gt(" (p._opts.vnum - 1) ")" Hide();
p._i.hover(p.stop, p.go);
//ボタン登録
$(p._opts.btn0).click(function(evt) _opts.dir = 0; p.slide(); }).mouseout(p.go); p._opts.dir = 1; p.stop (); p.slide(); return false }).mouseout(p.go);
});
// パブリックデフォルト。
$.fn.xMarquee.defaults = {
on: 'cur',
i: 'li', / /slide items css selector
interval: 5000 ,
fadein: 300,
fadeout: 200,
vnum: 4, // 表示可能なマーキー項目
dir: 1, // マーキーの方向。 1=右;0=左;
btn0: '.prev', //前ボタン
btn1: '.next'//次ボタン
})(jQuery); 🎜>


パッケージのダウンロード アドレス