布局框架

Fsscroll 全屏轮播jQuery插件

面包多

Fsscroll 全屏轮播jQuery插件-创客云
jquery-fsscroll 是一款 jquery 的全屏轮播插件。该插件是基于 jQuery 的简便的,高扩展性的全屏轮播插件。可用于产品轮播导航,个人信息展示等场景。

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="../src/jquery.fsscroll.css">
  2. <script src="jquery.min.js"></script>
  3. <script src="jquery.fsscroll.js"></script>

HTML 结构

  1. <div class="container">
  2.   <div class="sections">
  3.     <div class="section"></div>
  4.     <div class="section"></div>
  5.     <div class="section"></div>
  6.     <div class="section"></div>
  7.   </div>
  8. </div>

初始化插件

data 属性方式加载:

  1. <div class="container" data-fs-scroll>
  2.   <div class="sections">
  3.     <div class="section"></div>
  4.     <div class="section"></div>
  5.     <div class="section"></div>
  6.     <div class="section"></div>
  7.   </div>
  8. </div>

JS 方式加载:

  1. $('.container').fsScroll({
  2.   direction: 'horizontal'
  3. })

配置参数

参数 说明 类型 默认值
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

默认值:

  1. {
  2.   selectors: {
  3.     sections: '.sections', // 播放页父容器类
  4.     section: '.section',   // 播放页容器类
  5.     page: '.page',     // 分页容器类
  6.     active: '.active'   // 活动页类
  7.   }
  8. }

事件

option.beforeScroll(a,b)

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

option.afterScroll(a,b)

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

Github 网址:https://github.com/wozien/jquery-fsscroll

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!