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张用来做图片翻转切换。
以上所述就是本文的全部内容了,希望大家能够喜欢。