标签：
swiper是一个比较好的轮播滑动插件，他的优点就不多说了，用过的都说好！亲可以去官网亲自测试。
前段时间做了一个滑动引导页，需要有丰富的动画效果，虽然都是手写的效果，但是总觉得太麻烦，现在可以用swiper Animate来实现丰富的动画效果。官网的讲解也是非常简单，这里我自己做了个简单的小例子。
效果：
开始制作：
准备图片素材：
页面引用相关的css和js文件：
<link rel="stylesheet" href="js/swiper/swiper-3.3.0.min.css"> <link rel="stylesheet" href="js/swiper/animate.min.css">
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/swiper/swiper-3.3.0.jquery.min.js"></script> <script src="js/swiper/swiper.animate1.0.2.min.js"></script>
html主要代码结构：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/plane.png" class="plane ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.1s">
<img src="img/1.jpg" >
</div>
<div class="swiper-slide">
<img src="img/sun.png" class="sun ani" swiper-animate-effect="rotateIn" swiper-animate-duration="3s" swiper-animate-delay="0.1s">
<img src="img/2.jpg" >
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
简单的样式调整：
*{padding: 0;margin: 0;}
.swiper-slide{width: 100%;position: relative;}
.swiper-slide img{display: block;width: 100%;}
.swiper-slide .plane{position: absolute;top: 20px;right: 20px;width: 33%;}
.swiper-slide .sun{position: absolute;top: 10px;right: 10px;width: 30%;}
配置js代码：
<script>
var mySwiper = new Swiper (‘.swiper-container‘, {
pagination : ‘.swiper-pagination‘,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
这里可以对swiper进行设置，比如切换方向，效果等等。你还可以去官网查看尝试更多丰富的动画效果。
标签：
原文地址：http://www.cnblogs.com/Imever/p/5162554.html
