熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery圖片滾動圖片的效果

2013-11-15 12:15:52  來源: JSP教程 

  當移動的最後一屏移動的個數小於要展示的個數的時候 只移動(展示個數最後一屏的個數的)差值 舉個例子 每一屏都要展示但總個數才滾動到下一屏時候用戶看到的還是這個時候需要移動的是三個

  這個效果是基於jQuery寫的只是想紀念下自己的學習 話不多說了貼代碼    代碼如下: (function( $ ){ var slider = function( elem args ){ thisconfig = $extend({ effect : x //效果 水平 x speed : //動畫速度 trigger : mouseenter //觸發事件 callback : null // 回調函數 view :   } args || {} );   thishistory = [];//記錄移動的歷史記錄 thisindex = ; thisel = elem; thislength = thiselfind(li)length;//記錄總長度 thiswidth = thiselfind(li)eq()outerWidth();//記錄每一個單項的寬度 thisinit(); } sliderprototype = { constructor : slider init : function(){ thisbindEvents(); } bindEvents : function(){ thisprev(); thisnext(); } prev : function(){ thiselfind([datatype="left"])click( $proxy(function(){   if( !thishistorylength ) return;//如果記錄為空證明沒有進行移動過所以直接return   thisindex; var step = thishistorypop();//取最後的移動步驟 var move = step * thiswidth;//算出移動寬度 thiselfind("ul")animate( { "left" : "+="+move+"px" } thisconfigspeed )   } this)); } next : function(){ thiselfind([datatype="right"])click( $proxy(function(){ //如果是當前的最後一頁直接return if(thisindex == parseInt( thislength / thisconfigview ) ){ return; } thisindex++; //這個計算很重要 //計算 ( 下一頁 * view ) 展示個數是否大於總長度 : 好比當前在第一頁 (+) * > (總長度) //則thisstep 賦值為取余 也就是剩下要移動的個數 if( thisconfigview * (thisindex+) > thislength ){ thisstep = thislength%thisconfigview; }else{ //否則移動展示的個數 thisstep = thisconfigview; } //記錄移動的歷史記錄 thishistorypush(thisstep); var move = * thisstep * thiswidth;  thiselfind("ul")animate( { "left" : "+="+move+"px" } thisconfigspeed )   } this));  } }   $fnslider = function( args ){ return thiseach(function(){ var el = this; var plugins = new slider( $( el ) args ); $(el)data("slider" plugins ); }); } })(jQuery)     開始對這個實現沒有好的想法本來想利用一個變量記錄當前的移動個數的但是後面突然想到用數組來做這樣子的處理頓時感覺清晰了   這個的實現重點是一個記錄移動步驟的數組向左移動的時候往數組裡面push移動的步驟向右移動的時候從數組裡面取最後一項 []pop()   這樣子很好的實現了需求做的比較粗糙麻煩各位大神提點意見    
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20603.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.