最炫的jQuery幻灯片插件：jq-tiles

jQuery的幻灯片插件很多，效果也都不错，今天我推荐一个比较小巧方便的，使用起来也比较容易，支持多达12种特效、22个自定义参数；支持随机顺序、循环、正反方向、导航、缩略图；幻灯片播放前、中、后自定义事件等，相信可以满足绝大多数需求。此插件使用了比较酷的CSS3特效，兼容Webkit、Firefox、Opera、IE10、IE9-8*浏览器，在Chrome浏览器下效果最佳。

首先看下效果图：

插件使用方法：

1、可选参数，我就不翻译了，以免误导大家：

Options:
{
x : 4, // # of tiles in x axis, 20 max
y : 4, // # of tiles in y axis, 20 max
effect : ‘default’,
fade : false, // fade images in addition to the tiles effect
random : false, // animate tiles in random order
reverse : false, // start animation from opposite direction
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, // Start the slideshow on load
loop : false, // Start slideshow again when it finishes
slideSpeed : 3500, // time between slides
tileSpeed : 800, // time to clear all tiles
cssSpeed : 300, // css3 transition speed [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, // Show thumbnails when hovering nav
thumbSize : 25, // Thumbnail size (percentage of the original image)
timer : true // show or hide the timer bar
beforeChange : function() {}, // Runs before changing the image
afterChange : function() {} // Runs after the tiles have cleared
onSlideshowEnd : function() {} // Runs when the slideshow finishes ( “loop” must be set to false )
}

2、使用方法：

start：

$(‘.slider’).tilesSlider(‘start’)

stop：

$(‘.slider’).tilesSlider(‘stop’)

next：

$(‘.slider’).tilesSlider(‘next’, callback)

prev：

$(‘.slider’).tilesSlider(‘prev’, callback)

3、使用示例：

HTML:

<div class=”slider”>
<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>

CSS:

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

jQuery:

$(‘.slider’).tilesSlider({ random: true })

4、WordPress中使用注意事项：

由于原插件中会对描述的p标签包裹CSS样式，而WordPress源码编辑器中换行的话，就会自动追加p标签，会造成幻灯片显示效果不佳。我简单修改了一下，html代码中将描述的p标签赋予一个CSS类，如<p class=”tiles-desc”>Description image two</p>，再修改jquery.tiles.js文件中_setupDescriptions函数，将函数中两处 (‘p’) 修改为 (‘p.tiles-desc’) 即可。

5、优化：

页面加载就同步显示幻灯片，会多多少少影响页面载入速度，我的处理方法就是，默认载入一张10kb的图片，将相关js文件放到页面底部，另外，自己写个函数，动态输出html内容，需要的可以参考我的幻灯片页面和js文件，欢迎指导！

附上我修改过的jq-tiles完整包：百度网盘，插件包中含有压缩后的jquery.tiles.min.js文件，但是我没修改。

完整演示地址：jq-tiles