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

jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果

HTML结构:

HTML结构非常简单。

调用插件

注意别忘了引入jQuery和jquery.gridrotator.js文件。 可选参数

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

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...