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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
使用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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
python网络编程之文件下载实例分析
2015/05/20 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2014年营业员工作总结
2014/11/18 职场文书
工作收入证明模板
2015/06/12 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
法制主题班会教案
2015/08/13 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
nginx 配置指令之location使用详解
2022/05/25 Servers