jquery.gridrotator是一款非常實用的響應式圖片展示畫廊插件。這款圖片展示畫廊插件將圖片像網格一樣排列,然后隨機將某個格子中的圖片翻轉顯示另一張圖片。共有6種效果。
HTML結構:
HTML結構非常簡單。
<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>
調用插件
$(function() { $( '#ri-grid' ).gridrotator();});
注意別忘了引入jQuery和jquery.gridrotator.js文件。
可選參數
// number of rowsrows : 4, // number of columns columns : 10, // rows/columns for different screen widths// i.e. w768 is for screens smaller than 768 pixelsw1024 : { 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.maxStepstep : 'random',maxStep : 3, // prevent user to click the itemspreventClick : true, // animation type// showHide || fadeInOut || slideLeft || // slideRight || slideTop || slideBottom || // rotateLeft || rotateRight || rotateTop || // rotateBottom || scale || rotate3d || // rotateLeftScale || rotateRightScale || // rotateTopScale || rotateBottomScale || randomanimType : 'random', // animation speedanimSpeed : 500, // animation easingsanimEasingOut : 'linear',animEasingIn : 'linear', // the item(s) will be replaced every 3 seconds// note: for performance issues, the time "can't" be < 300 msinterval : 3000,// if false the animations will not start// use false if onhover is true for exampleslideshow : true,// if true the items will switch when hoveredonhover : false,// ids of elements that shouldn't changenochange : []
當你定義網格大小的時候,你要注意的是不是所有的圖片都會在網格中立刻顯示。舉個例子,你有50張圖片,定義了4行5列,那么會有20張圖片在網格中顯示,其它30張用來做圖片翻轉切換。
以上所述就是本文的全部內容了,希望大家能夠喜歡。
新聞熱點
疑難解答