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 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
js动态设置div的值下例子
Oct 29 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
js+canvas绘制图形验证码
Sep 21 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
使用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 Ajax中文乱码问题解决方法
2009/02/27 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
小程序实现多选框功能
2018/10/30 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
国家助学金获奖感言
2014/01/31 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
一年级学生评语大全
2014/04/21 职场文书
分公司经理任命书
2014/06/05 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
出纳工作检讨书
2014/10/18 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
学前教育见习总结
2015/06/23 职场文书
python turtle绘图
2022/05/04 Python