当前位置：首页 > 网页特效 > 幻灯片和轮播图

jquery的全屏轮播插件jquery-fsscroll

分类：幻灯片和轮播图日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<link rel="stylesheet" href="../src/jquery.fsscroll.css">
<script src="jquery.min.js"></script>
<script src="jquery.fsscroll.js"></script>    
```              
#####  HTML结构
```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属性方式加载：

```html
<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方式加载：

```html
$('.container').fsScroll({
  direction: 'horizontal'
})
```
#####  配置参数
- selectors：选择器。
- index：设置当前页索引，默认为0。
- timing：动画曲线，默认为ease。
- duration：动画时间，默认为500毫秒。
- loop：是否循环of，默认为false。
- pagination：是否显示分页，默认为true。
- keyboard： 是否支持键盘操作，默认为false。
- direction： 滑动方向，默认为'vertical'。
- beforeScroll：滑动开始前回调。
- afterScroll：滑动结束后回调。
默认值：

```html
{
  selectors: {
    sections: '.sections', // 播放页父容器类
    section: '.section',   // 播放页容器类
    page: '.page',     // 分页容器类
    active: '.active'   // 活动页类
  }
}
```
 事件
```html
option.beforeScroll(a,b)
```

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

```html
option.afterScroll(a,b)
```

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