项目需要，自己写了个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