jflex是一款小巧的適合移動手機使用的jQuery幻燈片插件。該幻燈片插件支持移動觸摸，支持鼠標拖拽切換，還支持帶進度條的自動播放模式。它是否的小球，使用非常簡單。
在線預覽 源碼下載
使用該幻燈片插件需要引入jQuery，jflex.min.js和jflex.min.CSS文件。
1 2 3 | <link rel="stylesheet" href="css/jflex.min.css" type="text/css"> |
該幻燈片使用無序列表的HTML結構，每一個<li>元素是幻燈片的一個slide。你可以通過設置<li>元素的data-title屬性來設置幻燈片圖片的標題。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="slider"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="1.jpg"> </li> <li data-title="Slide 2"> <img alt="" src="2.jpg"> </li> <li data-title="Slide 3"> <img alt="" 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。via：http://www.w2bc.com/article/jquery-mobile-focus-jflex
新聞熱點
疑難解答
