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">
<h2 class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s">
<img src="public/p_w_picpaths/title01_slide01.png">
</h2>
<h3 class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
<img src="public/p_w_picpaths/title02_slide01.png">
</h3>
<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">
<h2>
<img src="public/p_w_picpaths/title01_slide01.png">
</h2>
<h3>
<img src="public/p_w_picpaths/title02_slide01.png">
</h3>
<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动画
}
})
})