项目需要，自己写了个demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="./lib/swiper/swiper.css">
<link rel="stylesheet" href="./lib/swiper/swiper.animate/animate.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height: 100%;
font-family: arial,helvetica;
}
.swiper-container {
width: 100%;
height: 100%;
text-align: center;
} #slide1{
background: #BFDA00;
} #slide2{
background: #2C3E50;
} #slide3{
background: #AC4F2C;
} .mySpan{
width:60px;
height:60px;
}
.pic1{
position:absolute;
top: 200px;
left: 60px;
background: url(./img/gaugin.jpg);
}
.pic2{
position:absolute;
top: 80px;
left: 150px;
background: url(./img/giotto.jpg);
}
.pic3{
position:absolute;
top: 180px;
right: 40px;
background: url(./img/leonardo.jpg);
}
.pic4{
position:absolute;
top:230px;
right:80px;
background: url(./img/warhol.jpg);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="slide1">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">内容</p>
<span class="ani mySpan pic1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></span>
<span class="ani mySpan pic2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s"></span>
<span class="ani mySpan pic3" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="0.4s"></span>
<span class="ani mySpan pic4" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.6s" swiper-animate-delay="0.2s"></span>
</div>
<div class="swiper-slide" id="slide2">
</div>
<div class="swiper-slide" id="slide3">
</div>
</div>
</div> <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./lib/swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="./lib/swiper/swiper.animate/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: false,
grabCursor: true,
roundLengths : true,
freeMode: false,
effect:"slide",
resistanceRatio : 0,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>
</html>
API
http://www.swiper.com.cn/usage/animate/index.html