适合移动手机使用的jQuery幻灯片插件

2024-04-27 15:01:43

字体：大中小

来源：转载

供稿：网友

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件。该幻灯片插件支持移动触摸，支持鼠标拖拽切换，还支持带进度条的自动播放模式。它是否的小球，使用非常简单。

在线预览源码下载

使用方法

使用该幻灯片插件需要引入jQuery，jflex.min.js和jflex.min.CSS文件。

<link rel="stylesheet" href="css/jflex.min.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script type="text/Javascript" src="js/jflex.min.js"></script>                

HTML结构

该幻灯片使用无序列表的HTML结构，每一个<li>元素是幻灯片的一个slide。你可以通过设置<li>元素的data-title属性来设置幻灯片图片的标题。

<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();`

也可以在初始化的时候插入一些配置参数：

$('.flex').jFlex({
    autoplay: true,
    timing: 5000,
    titles: 'bottom'
});                  

配置参数

autoplay：是否自动播放幻灯片。
fx：幻灯片的slide元素。
timing：幻灯片自动切换的时间。单位毫秒，默认值5000。
titles:幻灯片标签导航的位置。可选值：bottom, top。

浏览器兼容

Android 4.1+
Chrome 31+
Firefox 38+
IE 9+
Opera 30+

via：http://www.w2bc.com/article/jquery-mobile-focus-jflex

上一篇：jquery特效（2）—选项卡

下一篇：jQuery中ready与load事件

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注