jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。
HTML结构:
HTML结构非常简单。
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img src="/UploadFiles/2021-04-02/1.jpg">调用插件
$(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张用来做图片翻转切换。
以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
jQuery,响应式,图片展示
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“jquery.gridrotator实现响应式图片展示画廊效果”评论...
更新日志
2024年10月09日
2024年10月09日
- 徐璨宾《井底的蚯蚓》[320K/MP3][78.77MB]
- 碧蓝航线国庆金秋版本重磅上线 新玩法3D宿舍系统闪亮登场
- 自在西游自在服即将在10月1日开启 入驻即享豪礼满满
- 炉石传说最强术士卡组是哪个 术士最强天梯卡组推荐一览
- 炉石传说最强萨尔卡组是哪个 萨尔最强天梯卡组推荐一览
- 炉石传说最强潜行者卡组是哪个 潜行者最强天梯卡组推荐一览
- 银霞.1983-《爱迷惑我·我住小楼中》台湾复刻版[WAV+CUE]
- [雨果唱片]粤曲名家-《再折长亭柳》[WAV+CUE]
- 刘德华1998-你是我的女人[香港第二版][WAV]
- 压迫感谁最强?外媒评选恐怖游戏最佳女反派
- 还没正式发售:《寂静岭2:重制版》Steam玩家峰值近9000人
- 别搞政确了!超95%国外玩家反对强制包容性
- 《暗喻幻想:ReFantazio》试玩:ATLUS的自我挑战?
- 《憧憬成为魔法少女》第二季 反转魔法少女题材再掀热潮
- 海信AI电视E7N正式发布,引领AI画质新标杆