标签：
最近要用html5制作可以一屏一屏向上滑动的页面，发现大家使用swiper插件的较多，所以试了试，发现做出来的效果还不错，喜欢的朋友可以参考一下自己动手做啦。
1、首先我们要引入4个文件：
<head> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/animate.min.css"> <script src="js/swiper.min.js"></script> <script src="js/swiper.animate.min.js"></script> </head>
可以直接去官网下载 http://www.swiper.com.cn//
2、主体部分
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-------------slide1----------------->
<section class="swiper-slide swiper-slide1">
<div class="ani resize" style="width:208px;height:20px;margin:0auto;left:0;right:0;top:100px;z-index:3;"swiper-animate-effect="slideInLeft"swiper-animate-duration="1.5s"swiper-animate-delay="0s" >美丽心灵</div>
</section>
<!---------------slide2-------------->
<section class="swiper-slide swiper-slide2">
</section>
<!----------------slide3-------------->
<section class="swiper-slide swiper-slide3">
</section>
</div>
</div>
</body>
其中 wiper-animate-effect是你想要的动画效果，swiper提供了很多，下一章我会一一列出来供大家参考。
swiper-animate-duration 动画执行的时间
swiper-animate-delay动画的延迟时间
最后给大家一个实例，动手做一下就会了~
http://pan.baidu.com/s/1i3xjHPV
标签：
原文地址：http://www.cnblogs.com/jinjin-blog/p/4485476.html
