サンプルスライダーを使用してjQueryプラグインを作成する

多くの場合、作業のために画像やブロックなどをページにスクロールするためのスライダーを埋め込む必要があります 多くの場合、余分で不要な機能を持つ「エイリアン」開発で遊んだ後、私は自転車を作り、jQueryのプラグインとして設計することにしました。



これは私の最初のプラグインであり、コードはしばらく怖いかもしれませんが、この実装は理想的であると主張していませんが、今ではすべてがうまく、かなりバラ色に見え、誰かに役立つかもしれません。



最初に、jQueryのプラグイン設計ルールを学ぶ必要があります。 このリンクの情報を使いました。 jQueryプラグインを含むファイルについては、その名前に関して合意があることをどのようにして見つけましたか-jquery.pluginName.js形式に準拠する必要があります。 したがって、プラグインを含むファイルはjquery.lbslider.jsと呼ばれる必要があります-それがまさに私のスライダーに名前を付けることにした理由です。 プラグインコード自体には、このデザインが必要です（詳細については、上記のリンクを参照してください）。

(function($){ jQuery.fn.pluginName = function(options){ //          . //        //    ,     //     options = $.extend({ param1: 'param1Value', //1 param2: 'param2Value' //2 }, options}; var make = function(){ //        }; return this.each(make); //  ,  pluginName    jQuery  }; })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、実装でこのようなパラメーターを使用することにしました。

leftBtn-スライダーを左にスクロールするボタン

rightBtn-スライダーを左にスクロールするボタン

quantity-ページに表示される要素の数（必要なのは1つだけ、場合によっては3、4以上）

autoPlay-スライダーが自動スクロールを必要とするかどうかを示すブール値

autoPlayDelay-自動スクロール時の遅延



だからここに私のデフォルトのオプションがあります：

 var options = $.extend({ leftBtn: 'leftBtn', rightBtn: 'rightBtn', quantity: 4, autoPlay: false, // true or false autoPlayDelay: 10 // delay in seconds }, options);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、実装に直接進みます。 スライダーのhtmlコードはラッパーブロックで構成され、その中にスクロール用のボタンと、要素がロールされる<ul>リストを持つ別のブロックが含まれることに決めました。 まず、いくつかのスタイルを追加します。

 var make = function() { $(this).css('overflow', 'hidden'); var el = $(this).children('ul'); el.css({ position: 'relative', left: '0' }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スクロールをエンドレスにすることが決定されました。これは、最初の最後からいくつかの要素と最後の最初のいくつかの要素を複製するためです。 いくつか-これはページ上の表示可能な要素の数-数量パラメータです。

 var sliderFirst = el.children('li').slice(0, options.quantity); var tmp = ''; sliderFirst.each(function(){ tmp = tmp + '<li>' + $(this).html() + '</li>'; }); sliderFirst = tmp; var sliderLast = el.children('li').slice(-options.quantity); tmp = ''; sliderLast.each(function(){ tmp = tmp + '<li>' + $(this).html() + '</li>'; }); sliderLast = tmp; var elRealQuant = el.children('li').length; el.append(sliderFirst); el.prepend(sliderLast);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

気づいたら、元の要素数を変数elRealQuantに保存しました-これはまだ役に立ちます。 次に、1つの要素の幅を設定します。これは、ブロック全体の幅と表示される要素の数に依存し、CSSプロパティfloat：leftも設定します。 要素の一部を複製し、リスト全体の幅を要素数×1要素の幅に等しく設定した後、すべての要素の新しい数を見つけます。

 var elWidth = el.width()/options.quantity; el.children('li').css({ float: 'left', width: elWidth }); var elQuant = el.children('li').length; el.width(elWidth * elQuant); el.css('left', '-' + elWidth * options.quantity + 'px');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、リスト全体を左に移動して、ページの読み込み時に先頭に追加された複製要素が表示されないようにしました。



ここで、スクロールアニメーション自体とそれに続く包含の間、スクロールボタンを無効にする機能を追加します。 これは、ボタンへの非アクティブなクラスの基本的な追加/削除であり、ボタンをクリックすることで、このクラスが存在するかどうかを確認します-何もしません。 もちろん、これらのボタンに個別のスタイルを設定することもできます。

 function disableButtons() { $('.' + options.leftBtn + ', .' + options.rightBtn).addClass('inactive'); } function enableButtons() { $('.' + options.leftBtn + ', .' + options.rightBtn).removeClass('inactive'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、スライダーのスクロールボタンを押して機能する実際の関数を作成します。

 $('.' + options.leftBtn).click(function(event){ event.preventDefault(); if (!$(this).hasClass('inactive')) { disableButtons(); el.animate({left: '+=' + elWidth + 'px'}, 300, function(){ if ($(this).css('left') == '0px') {$(this).css('left', '-' + elWidth * elRealQuant + 'px');} enableButtons(); } ); } return false; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは左ボタンの機能です。 まず、ボタンをオフにしてから、それぞれスクロールアニメーション自体を実行してから、再びボタンをアクティブにします。 アニメーションの最後に、スライダーが左端に到達したかどうかを確認します-ブロック全体を再び右に移動します-ユーザーはこれを画面に表示せず、再び左にスクロールできるようになります-無限に続きます。 右ボタンの機能も同様です。反対側にスクロールし、右端にスクロールするかどうかを確認します-左にシフトします。



存在する場合、自動スクロールを行うためにのみ残ります。 一般に、ボタンの1つをクリックするだけの定期的なエミュレーションになります。 また、スライダーにカーソルを合わせるとスクロールが停止し、カーソルを移動すると再開します。

 if (options.autoPlay) { function aPlay() { $('.' + options.rightBtn).click(); delId = setTimeout(aPlay, options.autoPlayDelay * 1000); } var delId = setTimeout(aPlay, options.autoPlayDelay * 1000); el.hover( function() { clearTimeout(delId); }, function() { delId = setTimeout(aPlay, options.autoPlayDelay * 1000); } ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあ、それがすべてです。 これで、すべてのプラグインコードを確認できます。





そして、それは非常に簡単に呼ばれます。 このようなもの：

 $('.slider').lbSlider({leftBtn: 'sa-left', rightBtn: 'sa-right', quantity: 3, autoPlay: true});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてもちろんデモ



欠陥がないわけではありません。 たとえば、ラッピングブロックの幅を手動で設定し、可視要素の数で完全に分割することをお勧めします。そうしないと、端に到達する小数値でバグが発生します。

もちろん、機能を拡張することもできます。たとえば、スクロールするときにいくつかの効果を追加したり、垂直にスクロールする機能を追加したり、もちろん欠陥を削除したりできます。



UPD：幅が修正されたバグ、マイナーな変更が行われました。 コードはGitHubに投稿されています 。