jQueryピクチャスクロールピクチャの効果(代替実装)_jquery

要件: 画像を切り替えるとき、次の画面に空白の項目を表示することはできません。

1. 最後の画面で移動した項目数が表示する項目数より少ない場合は、その差分(表示した項目数 - 最後の画面の項目数)だけを移動します。 例: 各画面に 7 つの項目を表示する必要がありますが、合計数は 10 のみです。次の画面にスクロールしても、ユーザーにはまだ 7 つの項目が表示されます。この時点で、移動する必要がある 3 つの項目は

です。

このエフェクトは jQuery に基づいて作成されています。学習したことを記念して、コードを投稿します。

コードをコピー コードは次のとおりです:

(function( $ ){
var slider = function( elem , args ){
this.config = $.extend({
effect : 'x', //効果レベル- x
: 600 , //アニメーション速度
トリガー : 'mouseenter', // トリガーイベント
コールバック速度 : null , // コールバック関数
view : 7
}, args | | {} );

this.history = [];//動きの履歴を記録します
this.index = 0;
this.el = elem;
this.length = this.el.find('li').length;//レコードの合計長
this.width = this.el.find('li').eq(0).outerWidth();//それぞれの単一項目の幅を記録します
this.init();
}
slider.prototype = {
constructionor: slider,
init: function(){
this。 bindEvents( );
},
bindingEvents: function(){
this.prev();
this.next();
},
prev : function(){
これ。 el.find('[data-type="left"]').click( $.proxy(function(){

移動が実行されていないことを証明するため、直接戻ります

this.index--;
var step = this.history.pop();//最後の移動ステップを取得します
var move = step * this.width;//移動を計算しますwidth
this.el.find("ul").animate( { "left" : " =" move "px" } , this.config.speed )

, this)); ）{


This.index ;
//この計算は非常に重要です
//表示数が全体の長さより大きいかどうか (次のページ* ビュー) を計算します: たとえば、現在最初のページ ( 1 1) *7 > ; 12 (全長) // this.step の割り当ては残り、つまり残りの数値
if (this.config.view * (this.index 1) & gt; これ。長さ ){
this.step = this.length%this.config.view;
}else{

}
dth;
これ。 el.find("ul").animate( { "left" : " =" move "px" } , this.config.speed )

, this)); }

$.fn.slider = function( args ){
return this.each(function(){
var el = this;
var plugins = new slider( $( el ) 、args）;

最初はこの実装についてよくわかりませんでしたが、当初は変数を使用して現在の手数を記録しようと考えていましたが、突然配列を使用してこの種の処理を行うことを思いつきました。突然明らかになった。

この実装の焦点は、移動ステップを記録する配列です。左に移動する場合は、ステップを配列にプッシュします。右に移動する場合は、配列 [].pop() から最後の項目を取得します。

これは要件を達成するための非常に良い方法ですが、少し荒っぽいのでアドバイスをお願いします。