jQuery图片幻灯插件-jq-tiles – 飞飞的个人网站

百度网盘下载：http://pan.baidu.com/share/link?shareid=129544&uk=4161137113

本地预览：http://www.ffasp.com/plugs/jq-tiles-master/index.html

今天介绍一款拥有不同片状动画过渡效果的jQuery插件-jq-tiles，使用它能够帮助你生成基于CSS3的片状动画效果。同时支持自定义选项：

效果选择
x，y坐标片状数量选择
速度
其它

支持图片缩略图预览功能，并且拥有图片导航功能，最后针对每张图片还支持不同类型的回调方法，如果你需要一个高性能的动画幻灯，使用CSS3的jq-tiles肯定是一个不错的选择。当然，如果你还需要支持臭名远扬的老版本IE的话，可能会让你失望了，希望大家喜欢这个插件！

类库依赖：jQuery

兼容性：Webkit, Firefox, Opera, IE10, IE9-8*

网站来源：http://elclanrs.github.com/jq-tiles/

下载：https://github.com/elclanrs/jq-tiles

参数:

{
  x              : 4, // # 横向方格数量，最多20个
  y              : 4, // # 纵向方格数量，最多20个
  effect         : 'default',//默认效果
  fade           : false, // 除方格效果外，都试用淡入淡出效果
  random         : false, // 方格动画随机顺序
  reverse        : false, // 反方向开始动画效果
  backReverse    : false, // reverse the animation when going back in the slideshow (useful for some effects)
  rewind         : false, // reverse animation at a certain percentage in time
  auto           : false, // 自动开始动画
  loop           : false, // 循环播放
  slideSpeed     : 3500, // 动画切换时间间隔
  tileSpeed      : 800, // 清除方格所用时间
  cssSpeed       : 300, // css3过渡效果时间间隔 [100,200,300,400,500,600,700,800,900,1000],
  nav            : true, // Add navigation
  navWrap        : null, // Add the navigation to an existing element
  bullets        : true, // Show bullets, if false the show pagination with numbers
  thumbs         : true, // 鼠标滑过导航的的时候显示缩略图
  thumbSize      : 25, // 设置缩略图的百分比 (percentage of the original image)
  timer          : true // 显示或隐藏时间进度条
  beforeChange   : function() {}, // 在图片改变前运行的函数
  afterChange    : function() {} // 在方格子被清除后
  onSlideshowEnd : function() {} // 在动画执行完后执行的函数 ( "loop" 必须设置为 false )
}

{

x : 4, // # 横向方格数量，最多20个

y : 4, // # 纵向方格数量，最多20个

effect : 'default',//默认效果

fade : false, // 除方格效果外，都试用淡入淡出效果

random : false, // 方格动画随机顺序

reverse : false, // 反方向开始动画效果

backReverse : false, // reverse the animation when going back in the slideshow (useful for some effects)

rewind : false, // reverse animation at a certain percentage in time

auto : false, // 自动开始动画

loop : false, // 循环播放

slideSpeed : 3500, // 动画切换时间间隔

tileSpeed : 800, // 清除方格所用时间

cssSpeed : 300, // css3过渡效果时间间隔 [100,200,300,400,500,600,700,800,900,1000],

nav : true, // Add navigation

navWrap : null, // Add the navigation to an existing element

bullets : true, // Show bullets, if false the show pagination with numbers

thumbs : true, // 鼠标滑过导航的的时候显示缩略图

thumbSize : 25, // 设置缩略图的百分比 (percentage of the original image)

timer : true // 显示或隐藏时间进度条

beforeChange : function() {}, // 在图片改变前运行的函数

afterChange : function() {} // 在方格子被清除后

onSlideshowEnd : function() {} // 在动画执行完后执行的函数 ( "loop" 必须设置为 false )

}

方法:

start

$('.slider').tilesSlider('start')

1	$('.slider').tilesSlider('start')

stop

$('.slider').tilesSlider('stop')

1	$('.slider').tilesSlider('stop')

$('.slider').tilesSlider('next', callback)

1	$('.slider').tilesSlider('next', callback)

$('.slider').tilesSlider('prev', callback)

1	$('.slider').tilesSlider('prev', callback)

用法:

HTML:

<div>
  <img src="img1.jpg"/> <!-- No description -->
  <img src="img2.jpg"/><p>Description image two</p>
  <img src="img3.jpg"/><p>Description image three</p>
</div>

<div>

<img src="img2.jpg"/><p>Description image two</p>

<img src="img3.jpg"/><p>Description image three</p>

</div>

CSS:

.slider { width: 600px; height: 400px; }

1	.slider { width: 600px; height: 400px; }

jQuery:

$('.slider').tilesSlider({ random: true })

1	$('.slider').tilesSlider({ random: true })

转载请注明：飞飞的个人网站 » jQuery图片幻灯插件-jq-tiles

参数:

方法:

start

stop

next

prev

用法:

与本文相关的文章