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. 保存属性至xml并读取

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  2. 2)PHP中把读取.txt中内容并转为UTF-8格式

    <?php $filename = "filename.txt"; $handle = fopen($filename, "r");//读取二进制文件时, ...

  3. codeforces 547B. Mike and Feet 单调栈

    题目链接 用单调栈计算出一个数字, 左边第一个比他小的数字的位置, 右边比第一个他小的数字的位置, 然后len = r[i] - l[i] +1. ans[len] = max(ans[len], a ...

  4. python进阶6 HTTP协议客户端实现

    httplib 1.httplib 是 python中http 协议的客户端实现,可以使用该模块来与 HTTP 服务器进行交互. httplib的内容不是很多,也比较简单.以下是一个非常简单的例子,使 ...

  5. Highlighting an element as it is hovered over (like inspect element in FireBug) - jQuery Forum

    Highlighting an element as it is hovered over (like inspect element in FireBug) - jQuery Forum Highl ...

  6. 在MySQL中创建实现自增的序列(Sequence)的教程

    这篇文章主要介绍了在MySQL中创建实现自增的序列(Sequence)的教程,分别列举了两个实例并简单讨论了一些限制因素,需要的朋友可以参考下 项目应用中,曾有以下一个场景: 接口中要求发送一个int ...

  7. Android消息机制之Handler

    Android为什么要提供Handler Android建议我们不要在UI线程中执行耗时操作,因为这很容易导致ANR异常(在Android源码中我们可以看到,UI如果对用户的操作超过5秒无响应,就会报 ...

  8. FMDB 直接将查询结果转化为字典

    今天学习FMDB框架,发现非常好用的一点,就是就以把查询结果直接转化为字典 NSString *querySql = @"select * from stuInfo"; NSMut ...

  9. foundation 框架 NSString常用总结(二)

    以此作为NSString常用总结(一)的补充 NSString* str = [NSString stringWithFormat:@"I love programing! You, com ...

  10. ##DAY7 UINavigationController

    ##DAY7 UINavigationController #pragma mark ———————UINavigationController——————————— 概括: 导航视图控制器也是一个视 ...