本教程將教大家制作一個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張用來做圖片翻轉切換。
以上所述就是本文的全部內容了，希望大家能夠喜歡。