jquery的全屏轮播插件jquery-fsscroll-鸾鸟资源网

jquery的全屏轮播插件jquery-fsscroll

发布2023-08-03 浏览1051次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！。

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'   // 活动页类
  }
}