超贊的jQuery幻燈外掛程式 附下載

來源:互聯網
上載者:User

應朋友的邀請,幫他公司做jQuery縮圖正中間的為當前播放至的圖片,兩邊呈發散狀,逐漸縮小並降低透明度。假設當前正播放至第0張圖片,則排列情況如下:

縮圖正中間的為當前播放至的圖片,兩邊呈發散狀,逐漸縮小並降低透明度。假設當前正播放至第0張圖片,則排列情況如下:

0

1 4

2 3

按逆時針方向轉一張圖後的排列情況如下:

4

0 3

1  2

這個只是縮圖的播放效果,縮圖輪轉時,後面有對應大圖跟著從右至左滾進,並且大圖進入的速度要對應著縮圖輪轉,整體效果如下:

一個幻燈播放效果,效果如下:

本人考慮將縮圖輪轉與大圖的滾進分開兩部分,縮圖輪轉做為一個單獨的jQuery外掛程式,由此外掛程式中的事件帶動大圖的滾進。下面先來說說縮圖的輪轉外掛程式的實現:

1、外掛程式的參數:

 
  1. this.defaults = {  
  2.        auto: false,        //是否自動播放  
  3.        width: 85,          //縮圖的寬度  
  4.        height: 42,         //縮圖的高度  
  5.        onstart: null,      //開始滾動  
  6.        onchange: null     //滾動事件  
  7. }; 

2、外掛程式的事件:

onstart事件,為每次開始啟動輪轉時觸發一次,轉出的參數有:當前縮圖的jQuery對象與輪轉到下一次縮圖的jQuery對象:

 
  1. opt.onstart && opt.onstart  
  2. (me.Images.img[curIdx].img$, me.Images.img[idx].img$); 

onchange事件,為每滾動一次距離就觸發一次,並且當前滾動至百分之多少的進度參數:

 
  1. opt.onchange && opt.onchange(stepPercent[step]); 

下面將要說到 stepPercent[step] 這個數組:

縮圖輪轉採用定時不定速度的方式,即每次輪轉不過時輪轉一張圖還是兩張圖,時間都是固定的,但是輪轉兩張圖的速度要比輪轉一張圖速度要快,這樣即使有再多的圖,滾動的距離再遠,也不至於要很久才能滾到。

stepPercent[step] 這個數組正是為這個設計的,每次輪轉,都固定走15步,每一步輪轉的距離都逐漸縮小.

 
  1. var stepPercent = new Array(15);      
  2. //固定走15步,每步走至百分之多少的一個數列。 表示經過時間一定,速度不固定  
  3. stepPercent[0] = 0.2;               //起始20%  
  4. stepPercent[1] = 0.2 + 0.2 * 0.81;   //第二步  
  5. for (var i = 2, total = stepPercent[1];   
  6. i < stepPercent.length; i++) {  
  7.     stepPercent[i] = total + (total - stepPercent[i - 2]) * 0.81;    
  8. //初始化數列。  
  9.     total = stepPercent[i];  
  10.      if (i == stepPercent.length - 1)  
  11.          stepPercent[i] = 1;  

起始第一步走20%,此後每一步都是前一步的81%,即速度每次遞減19%,但是小數計算有個誤差,到第15步時可能是個很接近於1,但是不是1的一個數值,所以,將第15步直接設定成1,即100%,滾動結束。

(註:這個數列是如何設計出來的呢,我是用Excel,找一個儲存格填上0.2,下一格公式為上一格的0.81,然後往下多拖一點,然後將上面的累加到接近1的數值,就是要的步數了。)

這個數列如果不用JS產生,其實也可以將Excel中建立出來的數列直接定義一個數組,以後如果想要修改速度,再照做一次就行。

輪轉時,縮圖的尺寸、透明度、位置等資訊的計算,都採用此stepPercent數組設定好的比例因素。

關於外掛程式其他不在贅述,請直接下載原始碼查看,下面說說大圖如何跟著縮圖滾動。

3、大圖滾動

大圖在隨著縮圖滾動時,不過滾動到第幾張,表現出來的效果都是緊跟著當前大圖的後面滾進,以防跳過太多張時,由於速度太快,造成眼花繚亂的感覺,所以這裡這個onstart事件就派上用場了。

在onstart事件中,先將當前圖移動到大圖列表首位、再將靶心圖表移動到當前圖的後面,(註:要將當前圖移動到大圖列表首位,是因為有可能下一張在當前張的前面,當前張移到後面,捲軸位置會動)。

然後在onchange事件中,只要根據傳入的進度參數,設定橫捲軸的滾動距離就行了,大圖的滾動就這麼簡單。具體JS如下:
 

 
  1. $(function() {  
  2.     $("#div_Slide").Slide({  
  3.         auto: true,  
  4.         width: 85,  
  5.         height: 42,  
  6.         onstart: function(curImg, nextImg) {  
  7.             var cData = curImg.attr("data");  
  8.             var nData = nextImg.attr("data");  
  9.             var bigCur = $("#" + cData), bigNext = $("#" + nData);  
  10.  
  11.             var allBigImg = bigCur.parent().children("img");  
  12.             var curIndex = allBigImg.index(bigCur[0]);  
  13.             var nextIndex = allBigImg.index(bigNext[0]);  
  14.  
  15.             var firstImg = $(allBigImg[0]);  
  16.             if (firstImg.attr("id") != bigCur.attr("id"))  
  17.                 bigCur.insertBefore(firstImg);  
  18.             $("#div_BigImg").scrollLeft(0);  
  19.             bigNext.insertAfter(bigCur);  
  20.         },  
  21.         onchange: function(percent) {  
  22.             $("#div_BigImg").scrollLeft(1263 * percent);  
  23.         }  
  24.     });  
  25.     var bigDiv = $("#div_BigImg");  
  26.     var bigDivPos = bigDiv.position();  
  27.     bigDiv.scrollLeft(0);   
  28.  //初始時將捲軸滾到頭,是因為我發現當捲軸不在頭時,按F5重新整理,捲軸不會跳到頭。  
  29.  
  30.     $("#div_Slide").css({  
  31.         "top": (bigDivPos.top + bigDiv.height() - $("#div_Slide").height()) + "px",  
  32.         "left": bigDivPos.left + "px" 
  33.     });  
  34. }); 

源碼下載:SlideDemo

原文連結:http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html

【編輯精選】

  1. 10款給力構建易用性網站的jQuery外掛程式
  2. 10個超贊超實用的免費jQuery圖片外掛程式 附下載
  3. jQuery 1.5第一個Beta版發布 付下載
  4. 超炫無比 10個免費的jQuery相簿(附下載)
  5. 好戲連台 2010年最佳jQuery外掛程式揭曉(附下載)
【責任編輯:陳貽新 TEL:(010)68476606】


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。