画像スクロール画像の効果(異なる実現構想)
11683 ワード
需要:画像の切り替え時に次の画面に空白の項目は許されません.言い換えれば:
1.移動する最後の画面移動の個数が表示する個数より小さい場合、差分値のみ移動する(表示個数-最後の画面の個数の).例を挙げると、各画面に7つ表示されますが、合計数は10個で、次の画面にスクロールするとユーザーが見たのは7個で、このとき移動する必要があるのは3つです.
この効果はjQueryに基づいて書かれていますが、自分の勉強を記念してあまり話さないで、コードを貼りたいだけです.
最初はこの実現に良いアイデアがなく、1つの変数で現在の移動個数を記録しようとしたが、後で突然配列でこのような処理をしようとしたので、急にはっきりした感じがした.
この実装の重点は,移動ステップを記録する配列である.左に移動するときは配列内にpushを移動する手順、右に移動するときは配列内から最後の項目を取る[].pop().
このようにしてとても良いのは需要を実现して、するのは比较的に粗雑で、各位の大神に意见を出してもらいます
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().
このようにしてとても良いのは需要を実现して、するのは比较的に粗雑で、各位の大神に意见を出してもらいます