溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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動畫
}
})
})免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
