swiper控件(回调函数)
属性:
swiper.slides.length
1、onInit(swiper): function(){...}
swiper初始化完成,会调回调 onInit 方法 获取当前swiper索引值
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
//Swiper初始化了
//alert(swiper.activeIndex);提示Swiper的当前索引
}
})
</script>
当设置属性值
initialSlide: 1
//alert(swiper.activeIndex);提示Swiper的当前索引 为: 1
通过设置该属性,指定当前swiperSlide位置
2、onTouchStart \ onTouchMove \ onTouchEnd
监听当前slide滑动状态
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTouchStart: function(swiper,even){
alert('事件触发了;');
}
})
</script>
3、onSlideChangeStart 、 onSlideChangeEnd
回调函数,swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数,此时可用onTransitionStart。
可接受swiper实例作为参数,输出的activeIndex是过渡后的slide索引。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
alert(swiper.activeIndex);
}
})
</script>
4、onImagesReady
回调函数,所有内置图像加载完成后执行,同时“updateOnImagesReady”需设置为“true’。
内置标签内使用 img
5、onTransitionStart \ onTransitionEnd
回调函数,过渡开始时触发,接受Swiper实例作为参数。
Swiper运作原理
Swiper常用运作方式有两种:手动触摸切换或者导航切换(前进后退按钮,键盘控制,分页器,内置方法slideTo等)
1. 手动触摸切换拖动阶段Swiper根据手势位置实时设定wrapper的位移(onSetTranslate),释放拖动时Swiper会设定一次wrapper自由过渡(onSetTranslate、onSetTransition、onTransitionStart、onSlideChangeStart)。速度为speed直到过渡结束(onTransitionEnd、onSlideChangeEnd)。
2. 导航切换可参考手动触摸释放阶段
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTransitionStart: function(swiper){
...
}
})
</script>
6、onClick \ onTap \ onDoubleTap (swiper, event): function(){...}
7、onReachBeginning \ onReachEnd (swiper): function(){...}
8、onDestroy(swiper): function(){...}
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onDestroy: function(swiper){
alert('你销毁了Swiper;');
}
})
$('#btn1').click(function(){
mySwiper.destroy(false);
})
</script>
设为false则不销毁Swiper对象,默认为true。
9、onAutoplay \ onAutoplayStart \ onAutoplayTop
10、onLazyImageLoad \ onLazyImageReady
11、onSlideNextStart \ onSlideNextEnd 下滑触发(开始及结束)
12、onSlidePrevStart \ onSlidePrevEnd 上滑动(开始及结束时触发)
13、onScroll:function(swiper){...} 需要设置 mousewheelControl : true
14、onKeyPress 在允许键盘控制状态下,按键盘时会触发这个函数。 keyboardControl:true
15、onBeforeResize \ onAfterResize 回调函数:当swiper跟随windows变化尺寸前后触发。
swiper控件(回调函数)的更多相关文章
- nj04---事件回调函数
一.回调函数 1.异步式读取文件 var fs=require('fs'); fs.readFile('file.txt','utf-8',function(err,data){ if(err){ c ...
- WPF 分页控件的实现 -用户控件
效果图:
- 2016.1.19 DEV Express控件GirdControl使用
103.GridControl中添加Button RunDesigner,添加一列,设置对应字段FiledName,ColumnEdit选择ButtonEdit,此时默认风格像下拉框,需调整属性: 在 ...
- cocos2dx基础篇(9) 滑块控件CCControlSlider
[3.x] (1)去掉 “CC” (2)对象类 CCObject 改为 Ref (3)CCControlEvent 改为强枚举 Control::EventType (4)CCControlEvent ...
- MFC 设置控件事件对应的函数
在项目中,右击你想设置的控件,打开属性. 然后找到:控件事件,如果在Visual Studio 2015中操作,显示如图: 然后,以设定单击事件为例: 点击右边的三角,选择 <Edit Code ...
- 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版
<zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...
- 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表
<zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...
- emwin之错误使用控件函数导致死机现象
@2018-10-15 导致死机的代码示例如下 /** * @brief widget ID define * @{ */ #define ID_WINDOW_0 (GUI_ID_USER + 0x0 ...
- vs2010开发activex(MFC)控件/ie插件(三),js调用ocx控件的接口函数
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802280 js调用ocx控件的接口函数,先看demo效果: 简单测试过程 ...
随机推荐
- bzoj1735 [Usaco2005 jan]Muddy Fields 泥泞的牧场
传送门 分析 我们知道对于没有障碍的情况就是将横轴点于纵轴点连边 于是对于这种有障碍的情况我们还是分横轴纵轴考虑 只不过对于有障碍的一整条分为若干个无障碍小段来处理 然后将标号小段连边,跑最大匹配即可 ...
- Luogu 2312 [NOIP2014] 解方程
感觉好无聊. 秦九昭算法:一般地,一元n次多项式的求值需要经过(n+1)*n/2次乘法和n次加法,而秦九韶算法只需要n次乘法和n次加法.在人工计算时,一次大大简化了运算过程.(百度百科) 具体来说怎么 ...
- WinForm(C#)相关知识和经验的碎片化记录
1.引发类型为“System.Windows.Forms.AxHost+InvalidActiveXStateException”的异常 出现"System.Windows.Forms.Ax ...
- HUB和Switch
http://baike.baidu.com/view/600161.htm 当然交换机的功能还不止如此,它可以把网络拆解成网络分支.分割网络数据流,隔离分支中发生的故障,这样就可以减少每个网络分支的 ...
- 《Maven实战》笔记-5-pom聚合和继承
一.聚合 假设有两个模块:account-email和account-persist: 能够使用一条命令就能构建上述两个模块,需要创建一个额外的模块:account-aggregator: 通过acc ...
- Windows7 安装TensorFlow(本人试了好多方法后的成果)
本人机器为64位win7 首先安装python,版本一定要注意,TennsorFlow要使用 Python3.0 系列版本不能使用2.0系列版本,但是TensorFlow 的安装包目前windows版 ...
- [译]Javascript在ASP NET中的运用
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- SQL server 提取字符中第一次和最后一次出现的数字
CREATE FUNCTION [dbo].[StringExtractNumber(FirstOrLast)](@address nvarchar(max),@firstOrLast INT) re ...
- Data Base System.Data.OracleClient requires Oracle client software version 8.1.7 or greater解决方案
System.Data.OracleClient requires Oracle client software version 8.1.7 or greater解决方案 一.问题: 1.通过Syst ...
- 如何选择SSL 证书服务
从信任等级的角度来说,SSL证书主要分为三类: 1. 域名型https证书(DVSSL):信任等级一般,只需验证网站的真实性便可颁发证书保护网站: 2. 企业型https证书(OVSSL):信任等级高 ...