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


Posted in Javascript onJune 23, 2015

 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张用来做图片翻转切换。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
ie focus bug 解决方法
Sep 03 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
RequireJS使用注意细节
May 15 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 #Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 #Javascript
Js+php实现异步拖拽上传文件
Jun 23 #Javascript
javascript框架设计之类工厂
Jun 23 #Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 #Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 #Javascript
简述AngularJS相关的一些编程思想
Jun 23 #Javascript
You might like
PHP连接MongoDB示例代码
2012/09/06 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP反射实际应用示例
2019/04/03 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
Python中实现的RC4算法
2015/02/14 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python如何处理程序无法打开
2020/06/16 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
争论的故事教学反思
2014/02/06 职场文书
租赁协议书范本
2014/04/22 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
教师求职自荐信范文
2015/03/04 职场文书
现役军人家属慰问信
2015/03/24 职场文书
面试通知短信
2015/04/20 职场文书
失恋33天观后感
2015/06/11 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
军训决心书范文
2015/09/22 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
使用Redis做预定库存缓存功能
2022/04/02 Redis
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技