本教程将教大家制作一个jQuery响应式图片展示画廊效果,所有图片以网格的形式排列,然后定时随机翻转其中某些格子用来切换图片。这种效果可以用来当做背景或装饰放在我们的网站上。
jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。
HTML结构:
HTML结构非常简单。
? 1 2 3 4 5 6 7
调用插件
? 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 : []