1、html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./public/css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="public/css/animate.min.css"> <link rel="stylesheet" type="text/css" href="./public/css/xie.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <h1 class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"> <img src="public/p_w_picpaths/title01_slide01.png"> </h1> <h2 class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s"> <img src="public/p_w_picpaths/title02_slide01.png"> </h2> <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s"> <img src="public/p_w_picpaths/img01_slide01.png"> </p> <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s"> <img src="public/p_w_picpaths/title03_slide.png"> </p> </div> <div class="swiper-slide"> <h1> <img src="public/p_w_picpaths/title01_slide01.png"> </h1> <h2> <img src="public/p_w_picpaths/title02_slide01.png"> </h2> <p> <img src="public/p_w_picpaths/img01_slide01.png"> </p> <p> <img src="public/p_w_picpaths/title03_slide.png"> </p> </div> </div> </div> </body> <script src="public/js/require.js" data-main="public/js/main" ></script> </html>
2、require.js模块
require.config({
paths:{
jquery:"./jquery.min",
swiper:"./swiper.jquery.min",
animate:"./swiper.animate1.0.2.min"
},
shim:{
swiper:{
deps:["jquery"],
exports:"Swiper"
},
animate:{
deps:["swiper"],
exports:"animate"
}
}
})
require(["jquery","swiper","animate"],function ($,swiper,animate) {
var mySwiper = new Swiper ('.swiper-container', {
direction : 'vertical',
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
})
