jquery.gridrotator實現響應式圖片展示畫廊效果

jquery.gridrotator實現響應式圖片展示畫廊效果
本教程將教大家製作一個jQuery響應式圖片展示畫廊效果，所有圖片以網格的形式排列，然後定時隨機翻轉其中某些格子用來切換圖片。這種效果可以用來當做背景或裝飾放在我們的網站上。

 

 

 

jquery.gridrotator是一款非常實用的響應式圖片展示畫廊外掛程式。這款圖片展示畫廊外掛程式將圖片像網格一樣排列，然後隨機將某個格子中的圖片翻轉顯示另一張圖片。共有6種效果。

HTML結構:

HTML結構非常簡單。

?

1 2 3 4 5 6 7

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li> <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li> <!-- ... --> </ul> </div>

調用外掛程式

?

1 2 3

$(function() { $( '#ri-grid' ).gridrotator(); });

注意別忘了引入jQuery和jquery.gridrotator.js檔案。
選擇性參數

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

// number of rows rows : 4,   // number of columns columns : 10,   // rows/columns for different screen widths // i.e. w768 is for screens smaller than 768 pixels w1024 : { rows : 3, columns : 8 },   w768 : { rows : 3, columns : 7 },   w480 : { rows : 3, columns : 5 },   w320 : { rows : 2, columns : 4 },   w240 : { rows : 2, columns : 3 },   // step: number of items that are replaced at the same time // random || [some number] // note: for performance issues, the number should not be > options.maxStep step : 'random', maxStep : 3,   // prevent user to click the items preventClick : true,   // animation type // showHide || fadeInOut || slideLeft || // slideRight || slideTop || slideBottom || // rotateLeft || rotateRight || rotateTop || // rotateBottom || scale || rotate3d || // rotateLeftScale || rotateRightScale || // rotateTopScale || rotateBottomScale || random animType : 'random',   // animation speed animSpeed : 500,   // animation easings animEasingOut : 'linear', animEasingIn : 'linear',   // the item(s) will be replaced every 3 seconds // note: for performance issues, the time "can't" be < 300 ms interval : 3000, // if false the animations will not start // use false if onhover is true for example slideshow : true, // if true the items will switch when hovered onhover : false, // ids of elements that shouldn't change nochange : []

當你定義網格大小的時候，你要注意的是不是所有的圖片都會在網格中立刻顯示。舉個例子，你有50張圖片，定義了4行5列，那麼會有20張圖片在網格中顯示，其它30張用來做圖片翻轉切換。

以上所述就是本文的全部內容了，希望大家能夠喜歡。