jquery.gridrotator实现响应式图片展示画廊效果

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


有用  |  无用 取消

猜你喜欢