Fsscroll 全屏轮播jQuery插件

创客云


jquery-fsscroll是一款jquery的全屏轮播插件。该插件是基于jQuery的简便的,高扩展性的全屏轮播插件。可用于产品轮播导航,个人信息展示等场景。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" href="../src/jquery.fsscroll.css">
  2. <script src="jquery.min.js"></script>
  3. <script src="jquery.fsscroll.js"></script>

HTML结构

  1. <div class="container">
  2.   <div class="sections">
  3.     <div class="section"></div>
  4.     <div class="section"></div>
  5.     <div class="section"></div>
  6.     <div class="section"></div>
  7.   </div>
  8. </div>

初始化插件

data属性方式加载:

  1. <div class="container" data-fs-scroll>
  2.   <div class="sections">
  3.     <div class="section"></div>
  4.     <div class="section"></div>
  5.     <div class="section"></div>
  6.     <div class="section"></div>
  7.   </div>
  8. </div>

JS方式加载:

  1. $('.container').fsScroll({
  2.   direction: 'horizontal'
  3. })

配置参数

参数 说明 类型 默认值
selectors 选择器类型对象 Object 如下
index 当前页索引 int 0
timing 动画曲线 string ease
duration 动画时间(ms) int 500
loop 是否循环播放 boolean false
pagination 是否显示分页 boolean true
keyboard 是否支持键盘操作 boolean false
direction 滑动方向 string vertical
beforeScroll 滑动开始前回调 function null
afterScroll 滑动结束后回调 function null

默认值:

  1. {
  2.   selectors: {
  3.     sections: '.sections', // 播放页父容器类
  4.     section: '.section',   // 播放页容器类
  5.     page: '.page',     // 分页容器类
  6.     active: '.active'   // 活动页类
  7.   }
  8. }

事件

option.beforeScroll(a,b)

滑动开始前回调。,a: 显示页的容器section, jquery对象。b: 显示页的索引

option.afterScroll(a,b)

滑动开始前回调。a: 显示页的容器section, jquery对象。b: 显示页的索引

Github网址:https://github.com/wozien/jquery-fsscroll

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/47279.html
云模板

发表评论