1、html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="./public/css/swiper.min.css"><linkrel="stylesheet"type="text/css"href="public/css/animate.min.css"><linkrel="stylesheet"type="text/css"href="./public/css/xie.css"></head><body><divclass="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide"><h2class="ani"swiper-animate-effect="zoomIn"swiper-animate-duration="1s"><imgsrc="public/p_w_picpaths/title01_slide01.png"></h2><h3class="ani"swiper-animate-effect="rotateIn"swiper-animate-duration="1s"><imgsrc="public/p_w_picpaths/title02_slide01.png"></h3><pclass="ani"swiper-animate-effect="fadeIn"swiper-animate-duration="1.5s"><imgsrc="public/p_w_picpaths/img01_slide01.png"></p><pclass="ani"swiper-animate-effect="fadeIn"swiper-animate-duration="1.5s"><imgsrc="public/p_w_picpaths/title03_slide.png"></p></div><divclass="swiper-slide"><h2><imgsrc="public/p_w_picpaths/title01_slide01.png"></h2><h3><imgsrc="public/p_w_picpaths/title02_slide01.png"></h3><p><imgsrc="public/p_w_picpaths/img01_slide01.png"></p><p><imgsrc="public/p_w_picpaths/title03_slide.png"></p></div></div></div></body><scriptsrc="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){varmySwiper=newSwiper('.swiper-container',{direction:'vertical',onInit:function(swiper){//Swiper2.x的初始化是onFirstInitswiperAnimateCache(swiper);//隐藏动画元素swiperAnimate(swiper);//初始化完成开始动画},onSlideChangeEnd:function(swiper){swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画}})})