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不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
如何使JavaScript休眠或等待
Apr 27 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作的文本留言本的例子(四)
2006/10/09 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
canvas知识总结
2017/01/25 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
js实现随机点名程序
2020/09/17 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python中new方法的详解
2019/01/15 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
2014年党课学习材料
2014/05/11 职场文书
最新离婚协议书范本
2014/08/19 职场文书
收款委托书
2014/10/14 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server