溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

requre.js模塊管理頁(yè)面中的js文件，優(yōu)化頁(yè)面，減少請(qǐng)求

發(fā)布時(shí)間：2020-07-26 01:15:03 來(lái)源：網(wǎng)絡(luò) 閱讀：561 作者：oQo先生 欄目：web開(kāi)發(fā)

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); //隱藏動(dòng)畫(huà)元素 
	    swiperAnimate(swiper); //初始化完成開(kāi)始動(dòng)畫(huà)
	  }, 
	  onSlideChangeEnd: function(swiper){ 
	    swiperAnimate(swiper); //每個(gè)slide切換結(jié)束時(shí)也運(yùn)行當(dāng)前slide動(dòng)畫(huà)
	  } 
	}) 
})


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手