jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件。该幻灯片插件支持移动触摸，支持鼠标拖拽切换，还支持带进度条的自动播放模式。它是否的小球，使用非常简单。
在线预览 源码下载
使用方法使用该幻灯片插件需要引入jQuery，jflex.min.js和jflex.min.CSS文件。
1
2
3
<linkrel="stylesheet"href="css/jflex.min.css"type="text/css">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/Javascript"src="js/jflex.min.js"></script>
HTML结构该幻灯片使用无序列表的HTML结构，每一个<li>元素是幻灯片的一个slide。你可以通过设置<li>元素的data-title属性来设置幻灯片图片的标题。
1
2
3
4
5
6
7
8
9
10
11
12
13
<divclass="slider">
<ulclass="slides">
<lidata-title="Slide 1">
<imgalt=""src="1.jpg">
</li>
<lidata-title="Slide 2">
<imgalt=""src="2.jpg">
</li>
<lidata-title="Slide 3">
<imgalt=""src="3.jpg">
</li>
</ul>
</div>
初始化插件在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。
1
$('.slider').jFlex();
也可以在初始化的时候插入一些配置参数：
1
2
3
4
5
$('.flex').jFlex({
autoplay:true,
timing: 5000,
titles:'bottom'
});
配置参数autoplay：是否自动播放幻灯片。fx：幻灯片的slide元素。timing：幻灯片自动切换的时间。单位毫秒，默认值5000。titles:幻灯片标签导航的位置。可选值：bottom, top。 浏览器兼容Android 4.1+Chrome31+Firefox38+IE 9+Opera30+via：http://www.w2bc.com/article/jquery-mobile-focus-jflex