jquery.gridrotator实现响应式图片展示画廊效果
jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列，然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。
HTML结构:
HTML结构非常简单。
<divid="ri-grid"class="ri-gridri-grid-size-1ri-shadow"> <ul> <li><ahref="#"><imgsrc="images/medium/1.jpg"alt="Whateverworks"/></a></li> <li><ahref="#"><imgsrc="images/medium/2.jpg"alt="Anythingelse"/></a></li> <!--...--> </ul> </div>
调用插件
$(function(){
$('#ri-grid').gridrotator();
});
注意别忘了引入jQuery和jquery.gridrotator.js文件。
可选参数
//numberofrows
rows:4,
//numberofcolumns
columns:10,
//rows/columnsfordifferentscreenwidths
//i.e.w768isforscreenssmallerthan768pixels
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:numberofitemsthatarereplacedatthesametime
//random||[somenumber]
//note:forperformanceissues,thenumbershouldnotbe>options.maxStep
step:'random',
maxStep:3,
//preventusertoclicktheitems
preventClick:true,
//animationtype
//showHide||fadeInOut||slideLeft||
//slideRight||slideTop||slideBottom||
//rotateLeft||rotateRight||rotateTop||
//rotateBottom||scale||rotate3d||
//rotateLeftScale||rotateRightScale||
//rotateTopScale||rotateBottomScale||random
animType:'random',
//animationspeed
animSpeed:500,
//animationeasings
animEasingOut:'linear',
animEasingIn:'linear',
//theitem(s)willbereplacedevery3seconds
//note:forperformanceissues,thetime"can't"be<300ms
interval:3000,
//iffalsetheanimationswillnotstart
//usefalseifonhoveristrueforexample
slideshow:true,
//iftruetheitemswillswitchwhenhovered
onhover:false,
//idsofelementsthatshouldn'tchange
nochange:[]
当你定义网格大小的时候，你要注意的是不是所有的图片都会在网格中立刻显示。举个例子，你有50张图片，定义了4行5列，那么会有20张图片在网格中显示，其它30张用来做图片翻转切换。
以上所述就是本文的全部内容了，希望大家能够喜欢。