幻灯片/轮播

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Ashade - 作品展示摄影相册WordPress汉化主题

Envato Affiliates

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

嘿,欢迎咨询!