布局框架
Fsscroll 全屏轮播jQuery插件
PetitQ
jquery-fsscroll 是一款 jquery 的全屏轮播插件。该插件是基于 jQuery 的简便的，高扩展性的全屏轮播插件。可用于产品轮播导航，个人信息展示等场景。
使用方法
在页面中引入下面的文件。
也想出现在这里？联系我们吧
<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 属性方式加载：
<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 方式加载：
$('.container').fsScroll({
direction: 'horizontal'
})
配置参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
默认值：
{selectors: {
sections: '.sections', // 播放页父容器类
section: '.section', // 播放页容器类
page: '.page', // 分页容器类
active: '.active' // 活动页类
}}
事件
option.beforeScroll(a,b)
滑动开始前回调。,a: 显示页的容器 section， jquery 对象。b: 显示页的索引
option.afterScroll(a,b)
滑动开始前回调。a: 显示页的容器 section， jquery 对象。b: 显示页的索引
Github 网址：https://github.com/wozien/jquery-fsscroll
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
