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
: 显示页的索引
jquery-fsscroll插件的github网址为:https://github.com/wozien/jquery-fsscroll
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!