1、先链接css和js文件

<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>

2、初始化

/* 初始化swiper.js */
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination', //分页器
direction:'vertical', //垂直方向换页
slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1 /* 初始化animate */
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
setTimeout(function(){ //2s后开始运行动画(移动端总是没加载完图片就开始动画了。。。。。)
swiperAnimate(swiper); //初始化完成开始动画
},2000)
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})

4、使用animate的动画,注意class中要加“ani”

<img class="ani pic" src="pic.jpg"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" />

  自定义的动画效果:

  html中添加class=“ani” 和swiper-animate-effect=“动画名”,可以与animate自带的动画一样,在每次切换时运行动画。

<img class="ani pic" src="pic.jpg"  swiper-animate-effect="shutter2" />

  css中定义效果

@-webkit-keyframes shutter2{
from{top: 100%;}
to{top:;}
}
.shutter2{
-webkit-animation: shutter2 0.5s forwards;
animation: shutter2 0.5s forwards;
}

API地址: http://www.swiper.com.cn/api/start/2014/1218/140.html

swiper,animate使用方法的更多相关文章

  1. Swiper教程 —— 使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  2. 微信网页动画---swiper.animate.css

    项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  4. 使用swiper.animate时,给一个对象添加两个动画且动画循环的方法

    swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...

  5. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  6. Swiper.js使用方法

    <!DOCTYPE html> <html> <head>  ... <link rel="stylesheet" href=" ...

  7. js文件中模块化导入swiper.js文件方法

    es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...

  8. animate使用方法

    链接:https://www.cnblogs.com/xiaohuochai/p/7372665.html

  9. css常用效果总结

    1.给input的placeholder设置颜色 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:maroo ...

随机推荐

  1. 常用Android快速开发框架

    在做项目的过程中遇到了很多困难,于是收集了一些快速开发的框架,使用后大大提高了项目开发速度,无论什么项目都可以使用的到,在此分享给大家,希望能对大家有帮助!(个人建议:有时间的同学可以看一下这些优秀框 ...

  2. JAVA之GUI编程ACTION事件

    package GUI; import java.awt.Button; import java.awt.FlowLayout; import java.awt.Frame; import java. ...

  3. java基础-修饰符

    下列哪个修饰符可以使在一个类中定义的成员变量只能被同一包中的类访问?(B) A:private  B:无修饰符  C:public  D:procted 名称  说明  备注  public  可以被 ...

  4. Oracle的TPCC测试,原来也是个作弊的东西...

    http://www.oaktable.net/content/sorted-hash-clusters-rip 根据Jonathan Lewis老先生的测试实例,发觉cluster 的sort功能, ...

  5. SDWebImage缓存

    缓存图片方法 [[SDImageCache sharedImageCache] storeImage:myImage forKey:myCacheKey]; 读取缓存 UIImage *myCache ...

  6. externkeyword放到函数体内而导致的linkage问题

    不少人都知道,C/C++语言编程时,假设要引用在别的C/C++文件里定义的变量或函数,必须extern一下,才干使用 另一些人知道,这个extern事实上能够放在函数体内声明,这么做的理由是不想让其它 ...

  7. 在Sharepoint中批量删除大量条目

    在Sharepoint开发中可能需要一次删除成百上千条记录,这时候如果轮询SPList.Items并直接调用该对象的删除方法来删除的话性能极差,会叫你崩溃. 下面介绍一个快速删除大量数据的方法: us ...

  8. struts2+hibernate环境搭建

    使用的是myeclipse2014,搭建比较简单,很多jar包不用自己引入,很多初始配置文件不需要自己写.后面会介绍ssh的搭建. 首先新建web project. 1.右键项目,如图所示 这个直接f ...

  9. C#DB2开发问题随记

    最近公司有个小工具需要用到DB2数据库,以前没玩过DB2,觉得应该很容易就实现了. 这个小工具最开始用了Nhibernate来连接DB2,Nhibernate也是第一次用..实在是惭愧啊... 第一次 ...

  10. Hibernate学习之缓存简析

    一.一级缓存 Hibernate的Session提供了一级缓存的功能,默认总是有效的,当应用程序保存持久化实体.修改持久化实体时,Session并不会立即把这种改变提交到数据库,而是缓存在当前的Ses ...