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,有空研究学习下
Jan 25 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JS之相等操作符详解
Sep 13 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
node.js到底要不要加分号浅析
Jul 11 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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
一个用于网络的工具函数库
2006/10/09 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JS实现简易计算器
2020/02/14 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
struct与class的区别
2014/02/03 面试题
EJB面试题
2015/07/28 面试题
园长自我鉴定
2013/10/06 职场文书
大学活动邀请函
2014/01/28 职场文书
房屋转让协议书范本
2014/04/11 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
业务员管理制度范本
2015/08/06 职场文书