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. javaTemplates-学习笔记一

    第一步,下载Java运行环境-JDK JDK -'1.8.0_25'[附链接地址] 安装JDK配置环境 安装好jdk,然后配置环境变量.不同系统配置环境变量百度Google之,附上WIN8配置方法[J ...

  2. 不包含任何UserControl

    奇怪了,以前做控件的时候都没有这个问题,哎,又堕落了1年,什么都忘了 创建自定义控件 可以继承现有控件,也可以继承userContrl类,但是现在有个问题 很多网上的资料说,啊,直接创建一个自定义控件 ...

  3. bzoj 2141 : 排队 分块

    题目链接 2141: 排队 Time Limit: 4 Sec  Memory Limit: 259 MBSubmit: 1169  Solved: 465[Submit][Status][Discu ...

  4. 随机数、continue、break

    arc4random() — 返回一个随机数(无符号整型).  如果要随机一个 [a, b]范围内的整数  公式:arc4random() % (b - a + 1) + a; #include &l ...

  5. HTML5速查表

    HTML5速查表 标签 描述 版本 属性 <!--...--> 定义注释 4 / 5 none <!DOCTYPE> 定义文档类型 4 / 5 none <a> 定 ...

  6. Linux发展历史大事编年表(截止2013年)

    这篇文章主要介绍了Linux发展历史大事编年表(截止2013年),Linux现在已经无处不在,是一个伟大的开原项目,让我一起来看看23年来它的发展历程吧   我们周围到处都有Linux的身影,在家中. ...

  7. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  8. 使用自定义脚本扩展程序自动执行 VM 自定义任务

     在 Build 开发者大会上推出VM 扩展程序的其中一个称为"自定义脚本扩展程序",它支持 PowerShell.如果这是您第一次访问这些博客,可能需要查看以前的博客,请单击 ...

  9. HDU 5875 Function(ST表+二分)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5875 [题目大意] 给出一个数列,同时给出多个询问,每个询问给出一个区间,要求算出区间从左边开始不 ...

  10. SpringMVC入门一:helloWorld

    玩了一下SpringMVC, 感觉挺清爽的 好像没有struts那么臃肿( 可能是高级的东西我还不会用 哈 ) 例子中一共有俩方法: 一个Controller直接返回字串的方法, 另一个通过Dao层返 ...