jQuery響應(yīng)式導(dǎo)航和圖片全屏頁(yè)面滾動(dòng)代碼

使用方法：

1、head引入css文件

<!--默認(rèn)樣式-->
<link rel="stylesheet" href="css/reset.css">

<!--響應(yīng)式框架-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<!--css3動(dòng)畫庫(kù)-->
<link rel="stylesheet" href="css/animate.css">

<!--banner大圖基礎(chǔ)樣式-->
<link rel="stylesheet" href="css/slick.css">

<!--頁(yè)面滾動(dòng)基礎(chǔ)樣式-->
<link rel="stylesheet" href="css/jquery.fullPage.css" />

<!--導(dǎo)航樣式-->
<link rel="stylesheet" href="css/head.css" />

<!--圖片和滾屏樣式-->
<link rel="stylesheet" href="css/index.css">

2、head引入js文件

<script src="js/jquery.min.js"></script>
	
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/index_slick.js"></script>

3、body引入HTML代碼

<!-- 導(dǎo)航 -->
<header class="header"> 
	<div class="container clearfix"> 
		<div class="fl left">
			<a href="javascript:void(0)" ><img src="image/logo.png" alt="" class="img1" /></a>
			<a href="javascript:void(0)" ><img src="image/logo2.jpg" alt="" class="img2" /></a>
		</div>
		<div class="fr nav"> 
			<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
				<li class="active">
					<a href="javascript:void(0)">首頁(yè)</a>					</li>
				<li class="dropdown">
					<a href="javascript:void(0)">
						業(yè)務(wù)體系						</a>
					<div class="dropdown_menu">
						<a href="#">Custom Menu</a>
						<a href="#">Custom Menu</a>
						<a href="#">Custom Menu</a>						</div>
				</li>
				<li class="dropdown">
					<a href="javascript:void(0)">直營(yíng)園</a>
					<div class="dropdown_menu">
						<a href="#">Custom Menu</a>
						<a href="#">Custom Menu</a>
						<a href="#">Custom Menu</a>						</div>
				</li>
				<li>
					<a href="javascript:void(0)">行知資訊</a>					</li>
				<li>
					<a href="javascript:void(0)">關(guān)于我們</a>					</li>
				<li>
					<a href="javascript:void(0)">聯(lián)系合作</a>					</li>
			</ul>
		</div>
		<a href="javascript:void(0)" id="navToggle">
			<span></span>
		</a>
	</div>
</header>
<!--移動(dòng)端的導(dǎo)航-->
<div class="m_nav">
	<div class="top clearfix">
		<img src="image/closed.png" alt="" class="closed" />
	</div>
	<div class="logo">
		<img src="image/logo2.jpg" alt="" />
	</div>
	<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
		<li class="active">
			<a href="javascript:void(0)">首頁(yè)</a>
		</li>
		<li class="dropdown">
			<a href="javascript:void(0)">
				業(yè)務(wù)體系
			</a>
			<div class="dropdown_menu">
				<a href="#">Custom Menu</a>
				<a href="#">Custom Menu</a>
				<a href="#">Custom Menu</a>
			</div>
		</li>
		<li class="dropdown">
			<a href="javascript:void(0)">直營(yíng)園</a>
			<div class="dropdown_menu">
				<a href="#">Custom Menu</a>
				<a href="#">Custom Menu</a>
				<a href="#">Custom Menu</a>
			</div>
		</li>
		<li>
			<a href="javascript:void(0)">行知資訊</a>
		</li>
		<li>
			<a href="javascript:void(0)">關(guān)于我們</a>
		</li>
		<li>
			<a href="javascript:void(0)">聯(lián)系合作</a>
		</li>
	</ul>
</div>
<!-- 內(nèi)容 -->
<div id="index_main" class="index_main">
	<!--導(dǎo)航-->
	<div class="section section1">
		<div class="index_banner">
			<div class="item">
				<div class="items scaleBg" style="background-image: url(image/banner1.jpg);"></div>
				<div class="inner">
					<div class="block_txt">
						<h4> Goodliness,to be continued</h4>
						<h2>讓<span>美好持續(xù)</span>發(fā)生</h2>
						<h3>我們有讓美好持續(xù)發(fā)生的愿望，更有讓美好持續(xù)發(fā)生的能力</h3>                            
					</div>
				</div>
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(image/2.jpg);"></div>
				<div class="inner">
					<div class="block_txt">
						<h4> Goodliness,to be continued</h4>
						<h2>讓<span>美好持續(xù)</span>發(fā)生</h2>
						<h3>我們有讓美好持續(xù)發(fā)生的愿望，更有讓美好持續(xù)發(fā)生的能力</h3>                            
					</div>
				</div>
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(image/banner2.jpg);"></div>
				<div class="inner">
					<div class="block_txt">
						<h4> </h4>
						<h2><span>0-12歲</span><br>可持續(xù)發(fā)展教育體系</h2>
						<h3>0-3歲早教  |  3-6歲幼兒園  |  5-12歲成長(zhǎng)銜接  |  6-12歲小學(xué)</h3>                            
					</div>
				</div>
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(image/banner3.jpg);"></div>
				<div class="inner">
					<div class="block_txt">
						<h4> </h4>
						<h2>幼兒園園所整體解決方案</h2>
						<h3>全程支持  |  個(gè)性服務(wù)</h3>                            
					</div>
				</div>
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(image/banner4.jpg);"></div>
				<div class="inner">
					<div class="block_txt">
						<h4>  </h4>
						<h2>成長(zhǎng)管理發(fā)展測(cè)評(píng)</h2>
						<h3>科學(xué)量表  |  全面評(píng)估  |  教育指導(dǎo)</h3>                            
					</div>
				</div>
			</div>            
		</div>
		<div class="left slick_txt">
			<div class="prev slick_arrow"></div>
		</div>
		<div class="right slick_txt">
			<div class="next slick_arrow"></div>
		</div>
		<div class="number">
			<div class="inner clearfix">
				<span class="active">01</span>
				<span >02</span>
				<span >03</span>
				<span >04</span>
				<span >05</span>
			</div>
		</div>
	</div>
	<div class="section section2">
		<div class="container">
			<h3>第二頁(yè)</h3>
		</div>
	</div>
	<div class="section section3">
		<div class="container">
			<h3>第三頁(yè)</h3>
		</div>
	</div>
	<div class="section section4">
		<div class="container">
			<h3>第四頁(yè)</h3>
		</div>
	</div>
</div>

<script src="js/index.js"></script>