swiper官网上给对象加一个动画的方法是

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

js代码为

<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>

然而我们想让这个对象进场后再循环执行一个动画效果,如心跳

这时我们需要用到swiper的一个属性——mySwiper.activeIndex  返回当前活动块的索引

我们用这个属性判断滑到哪一张时执行一个命令,即:再执行下一个动画就行了

因为添加动画后会把上一个动画给覆盖掉,所以需要加一个定时器

比如我们在对象进场后加这个闪烁的动画

<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
switch (swiper.activeIndex) {
case 1:
setTimeout(function(){
$("p").css({
animation: 'flash 1s linear 0s infinite'
})
},500);//定时器时间是上一个动画执行时间
break;
case 2:
}
}
})
</script>

以上纯属个人想法,如有不妥还请指正!

使用swiper.animate时,给一个对象添加两个动画且动画循环的方法的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法

    获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...

  3. QTableView 一列添加两个按钮

    在QTableView的一列里添加两个按钮,之前添加一个按钮的思路是一样的,只是计算了一下按钮的宽,放两个按钮而已. 添加一个按钮的例子:QTableView 添加按钮 本例源代码:QtTowButt ...

  4. 用Modelsim仿真QuartusII综合后网表时库的添加方法(转)

    这两天做综合后仿真,发现FPGA器件库又不会加了,无奈上网找方法.说起来不好意思,很早就接触Modelsim这个仿真软件了,可是没有好好琢磨.把这两天找的方法贴出来,再加上自己的理解,以后忘了可以上博 ...

  5. 在唯一密钥属性“fileExtension”设置为“.”时,无法添加类型为“mimeMap”的重复集合项

    在ASP.NET 网站的配置文件中添加了MIME类型,但是运行网站后在IIS上和页面上提示"在唯一密钥属性“fileExtension”设置为“.woff”时,无法添加类型为“mimeMap ...

  6. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  7. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  8. EditText中输入手机号码时,自动添加空格

    输入手机号码时,自动添加空格,更容易辨别 public class PhoneWatcher implements TextWatcher { private EditText _text; publ ...

  9. 编辑时snapping的添加

    原文 编辑时snapping的添加 注意需要在编辑模式下进行snapping的添加(也即先需要使用IEngineEditor进入编辑状态): IMapControl3 mMap = (IMapCont ...

随机推荐

  1. 10个 NPM 使用技巧

    对于一个项目,常用的一些npm简单命令包含的功能有:初始化一个文件夹( npm init ),下载npm模块( npm install ),创建测试( npm tese ) 和自定义脚本( npm r ...

  2. CF884D:Boxes And Balls

    浅谈\(Huffman\)树:https://www.cnblogs.com/AKMer/p/10300870.html 题目传送门:https://codeforces.com/problemset ...

  3. flask之python3 虚拟环境及使用dotnv来永久保存环境变量

    Python 3 comes bundled with the venv module to create virtual environments Create an environment Cre ...

  4. 极路由U-boot解锁刷root固件教程,root后可刷华硕、如意云等多种固件,附赠全套刷软

    9008正式版固件将会封堵此漏洞,想root的同学尽快了.安装新工具箱里的root保留,可升级官方最新固件并保留root. 此方法并非本人原创,只是将root的过程和经验做个总结,比较适合菜鸟做参考, ...

  5. salt-minion dead but pid file exists 正确解决方法

    说明: 看了网上很多关于alt-minion dead but pid file exists 的解决方法,千篇一律的写一个shell脚本 killproc salt-minion 见链接:http: ...

  6. 蓝桥杯 基础练习 BASIC-25 回形取数

    基础练习 回形取数   时间限制:1.0s   内存限制:512.0MB 问题描述 回形取数就是沿矩阵的边取数,若当前方向上无数可取或已经取过,则左转90度.一开始位于矩阵左上角,方向向下. 输入格式 ...

  7. 非常不错的LTE架构讲解

    <LTE系统协议架构---通俗易懂超经典> <3GPP协议导读> <3GPP协议36211-850中文翻译> <LTE全套协议汇总> <NB-IO ...

  8. 转载:MongoDB 在 58 同城百亿量级数据下的应用实践

    为什么要使用 MongoDB? MongoDB 这个来源英文单词“humongous”,homongous 这个单词的意思是“巨大的”.“奇大无比的”,从 MongoDB 单词本身可以看出它的目标是提 ...

  9. linux 命令 chown, cp $

    文件拷贝命令: sudo cp  /xxx/XXX    $HOME/ 改权限: sudo  chwon $(id -u): $(id -g)  $HOME/admin.conf 加入环境变量: ex ...

  10. spring 学习二 @RequestMapping

    RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestMapping注解有六个属性,下面我们把她 ...