jquery的全屏轮播插件jquery-fsscroll

jquery的全屏轮播插件jquery-fsscroll

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

使用方法
在页面中引入下面的文件。

1
2
3
4
5
6
7
8
9
10
11
12
<link rel="stylesheet" href="../src/jquery.fsscroll.css">
<script src="jquery.min.js"></script>
<script src="jquery.fsscroll.js"></script>                  
 HTML结构
<div class="container">
  <div class="sections">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
  </div>
</div>

初始化插件
data属性方式加载:

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

JS方式加载:

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

配置参数

  • selectors:选择器。
  • index:设置当前页索引,默认为0。
  • timing:动画曲线,默认为ease。
  • duration:动画时间,默认为500毫秒。
  • loop:是否循环of,默认为false。
  • pagination:是否显示分页,默认为true。
  • keyboard: 是否支持键盘操作,默认为false。
  • direction: 滑动方向,默认为'vertical'。
  • beforeScroll:滑动开始前回调。
  • afterScroll:滑动结束后回调。

默认值:

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

事件

1
option.beforeScroll(a,b)

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

1
option.afterScroll(a,b)
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论