post

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

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

首先看下效果图:

jq-tiles幻灯片插件

插件使用方法:

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

Comments

  1. 一下研究这个都2年了,想问问“页面加载就同步显示幻灯片,会多多少少影响页面载入速度,我的处理方法就是,默认载入一张10kb的图片,将相关js文件放到页面底部,另外,自己写个函数,动态输出html内容”这个具体怎么弄吗 ,博主有时间能写个具体点的教程吗

  2. 一下研究这个都2年了,想问问“页面加载就同步显示幻灯片,会多多少少影响页面载入速度,我的处理方法就是,默认载入一张10kb的图片,将相关js文件放到页面底部,另外,自己写个函数,动态输出html内容”这个具体怎么弄吗 ,博主有时间能写个具体点的教程吗

Trackbacks

  1. […] 利用WPtouch打造手机触屏版博客、最炫的jQuery幻灯片插件:jq-tiles […]

Speak Your Mind

*

· 660 次浏览