jquery的全屏轮播插件jquery-fsscrolljquery
演示效果:
代码下载:点击下载
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:选择器。
index:设置当前页索引,默认为0。
timing:动画曲线,默认为ease。
duration:动画时间,默认为500毫秒。
loop:是否循环of,默认为false。
pagination:是否显示分页,默认为true。
keyboard: 是否支持键盘操作,默认为false。
direction: 滑动方向,默认为'vertical'。
beforeScroll:滑动开始前回调。
afterScroll:滑动结束后回调。
默认值:
{
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: 显示页的索引
我要评论