jQuery全屏滚动插件fullPage.js/可制作全屏滚动网页

jQuery全屏滚动插件fullPage.js

0.01 基本演示  的HTML 布局 以及js 代码

   
   
   

    
//需要连接 连接的三个文件
    
<link rel="stylesheet" href="css/jquery.fullPage.css">    //css文件
    
<script src="js/jquery-1.8.3.min.js"></script>            //jQuery 1.8.3的版本                    
    
<script src="js/jquery.fullPage.min.js"></script>         //fullPage插件的压缩版本
    

   
   
   
   

    
<style>
    
.section {
        text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}     //可以改动 设置的是网页中的文字 <无关紧要>
    
</style>
    

    
<script>
    
$(function(){
       
    
	$('#dowebok').fullpage({                                                 
    
        //fullpage       比较重要 设置的是插件的基本设置  后面的
    
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']             
    
        //sectionsColor  当没有背景图片的时候这个就是设置背景颜色的否则就是空白  数组的形式 中间以逗号隔开 颜色不管是十六进制还是英文单词都需要用单引号包着
    
	});
    
});
    
</script>
   
   
   
   

    
<div id="dowebok">                                      //绑定的大盒子 设置滚动的盒子
    
	<div class="section">
    
		<h3>第一屏</h3>
    
		<p>fullPage.js — 基本演示</p>  
    
	</div>
    
	<div class="section">                               //滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击
    
		<div class="slide"><h3>第二屏的第一屏</h3></div>
    
		<div class="slide"><h3>第二屏的第二屏</h3></div>
    
		<div class="slide"><h3>第二屏的第三屏</h3></div>
    
	</div>
    
	<div class="section">
    
		<h3>第三屏</h3>
    
	</div>
    
	<div class="section">
    
		<h3>第四屏</h3>
    
		<p>这是最后一屏</p>
    
	</div>
    
</div>
   

0.02  插入背景图片演示  的HTML 布局 以及js 代码   <需要链接的文件都是一样的>

  
  
  

   
<style>                                      //需要注意的是这里 没有设置颜色 而是在css中设置的背景图片0
   
.section1 {
       background: url(images/1.jpg) 50%;}
   
.section2 {
       background: url(images/2.jpg) 50%;} 
   
.section3 {
       background: url(images/3.jpg) 50%;}
   
.section4 {
       background: url(images/4.jpg) 50%;}
   
</style>
   

   
<script>
   
$(function(){ 
   
	$('#dowebok').fullpage();                 //找到大盒子 设置fullpage全屏滚动
   
});
   
</script>
   

   
<div id="dowebok">
   
	<div class="section section1"></div>
   
	<div class="section section2"></div>
   
	<div class="section section3"></div>
   
	<div class="section section4"></div>
   
</div>
  

0.03 循环演示 html 布局以及js代码          <需要链接的文件都是一样的>

   
   
   

    
<script>
    
$(function(){
       
    
    $('#dowebok').fullpage({
       
    
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],   //和上面一样 sectionsColor 是设置每一屏的颜色 必须用逗号隔开 单引号包着
    
        continuousVertical: false,                                  //设置是否滑到底层再往下滚动是第一张图 设置true是执行此操作 设置false是不执行 默认不执行  不执行就不设置
    
    });    
    
});
    
</script>
    

    
<div id="dowebok">
    
    <div class="section">
    
        <h3>第一屏</h3>
    
        <p>fullPage.js — 循环演示</p>                               
    
    </div>
    
    <div class="section">
    
        <h3>第二屏</h3>
    
    </div>
    
    <div class="section">
    
        <h3>第三屏</h3>
    
    </div>
    
    <div class="section">
    
        <h3>第四屏</h3>
    
        <p>这是最后一屏了，继续往下滚返回第一屏</p>
    
    </div>
    
</div>
   

0.04  回调函数演示 

  
  
  

   
<title>fullPage.js — 回调函数演示</title>
   
<link rel="stylesheet" href="css/jquery.fullPage.css">