画像スクロール画像の効果(異なる実現構想)


需要:画像の切り替え時に次の画面に空白の項目は許されません.言い換えれば:
1.移動する最後の画面移動の個数が表示する個数より小さい場合、差分値のみ移動する(表示個数-最後の画面の個数の).例を挙げると、各画面に7つ表示されますが、合計数は10個で、次の画面にスクロールするとユーザーが見たのは7個で、このとき移動する必要があるのは3つです.
この効果はjQueryに基づいて書かれていますが、自分の勉強を記念してあまり話さないで、コードを貼りたいだけです.
 1 (function( $ ){
 2     var slider = function( elem , args ){
 3         this.config = $.extend({
 4             effect   : 'x', //       - x
 5             speed    : 600 , //    
 6             trigger  : 'mouseenter', //    
 7             callback : null , //     
 8             view     : 7 
 9         }, args || {}  );
10 
11         this.history = [];//         
12         this.index = 0;
13         this.el = elem;
14         this.length = this.el.find('li').length;//     
15         this.width = this.el.find('li').eq(0).outerWidth();//          
16         this.init();
17     }
18     slider.prototype = {
19         constructor : slider,
20         init : function(){
21             this.bindEvents();
22         },
23         bindEvents : function(){
24             this.prev();
25             this.next();
26         },
27         prev :  function(){
28             this.el.find('[data-type="left"]').click( $.proxy(function(){
29                 
30                 if( !this.history.length ) return;//      ,         ,    return
31                 
32                 this.index--;
33                 var step = this.history.pop();//        
34                 var move =  step * this.width;//      
35                 this.el.find("ul").animate( { "left" : "+="+move+"px" } , this.config.speed )
36 
37             } , this));
38         },
39         next : function(){
40             this.el.find('[data-type="right"]').click( $.proxy(function(){
41                 //          ,  return
42                 if(this.index == parseInt( this.length / this.config.view , 10 ) ){
43                     return;
44                 }
45                 this.index++;
46                 //       
47                 //   (     * view )             :          (1+1) *7 > 12(   )
48                 // this.step       ,           
49                 if( this.config.view * (this.index+1) > this.length ){
50                     this.step =  this.length%this.config.view;
51                 }else{
52                     //         
53                     this.step = this.config.view;
54                 }
55                 //         
56                 this.history.push(this.step);
57                 var move = -1 * this.step * this.width; 
58                 this.el.find("ul").animate( { "left" : "+="+move+"px" } , this.config.speed )
59 
60             } , this)); 
61         }
62     }
63 
64     $.fn.slider = function( args ){
65         return this.each(function(){
66             var el = this;
67             var plugins = new slider( $( el ) , args );
68             $(el).data("slider" , plugins );
69         });
70     }
71 })(jQuery) 

最初はこの実現に良いアイデアがなく、1つの変数で現在の移動個数を記録しようとしたが、後で突然配列でこのような処理をしようとしたので、急にはっきりした感じがした.
この実装の重点は,移動ステップを記録する配列である.左に移動するときは配列内にpushを移動する手順、右に移動するときは配列内から最後の項目を取る[].pop().
このようにしてとても良いのは需要を実现して、するのは比较的に粗雑で、各位の大神に意见を出してもらいます