今天完成的事：学习了fullpage.js的使用，学习了原生js的原型链，很晦涩

明天要做的事：继续学习原生

收货：

fullpage页面的使用

第一是引入插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.js"></script

然后添加页面，本例中添加了4个页面，其中第二个页面写了4个横向滚动的页面

<div id="fullpage">
    <div id="header">header</div>
    <div class="section section1"><h1>第一屏</h1></div>
    <div class="section section2" >
        <!--增加左右横移的幻灯片-->
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>
    <div class="section section3 ">
        <h1>第三屏</h1>
       
    </div>
    <div class="section section4"><h1>第四屏</h1></div>
</div>

然后可以去添加一波fullpage自带的方法

 $(document).ready(function(){
        $("#fullpage").fullpage({
            sectionsColor:["green","orange","grey","red"],
             //controlArrows:false        隐藏箭头在移动设备上可以左右滑动
            //verticalCentered:false   页面内容垂直居中 默认保持为true
            //resize:true,      字体随页面的大小而改动
            //scrollingSpeed:200,   页面滚动速度 默认是700毫秒
            anchors:["page1","page2","page3","page4"], //  定义锚链接  值不能和页面中任何一个class 或者 id 相同
            //loopTop:true,   //上下滚动触底反弹
            //loopBottom:true,
            //loopHorizontal:true,
            //autoScrolling   默认为true  若改成false  会出现浏览器自带的滚动条
            //paddingTop:'200px',
           // paddingBottom:'200px',//上下的间距值设置
            fixedElements:'#header',//头部或底部固定元素使用
            continuousVertical:true,//页面循环滚动
            //animateAnchor:false,  //???使用有问题需要百度  用于用锚链接控制滚动动画默认是true
            //recordHistory:false,
            //menu:'#a',//设置顶部menu菜单
            navigation:true,//设置侧边栏导航 会出现一些小圆点
            navigationPosition:'right',//设置导航小圆点的位置
            navigationTooltips:["page1","page2","page3","page4"],//默认为[]注意按照顺序设置
            //showActiveTooltip:true,
            //slidesNavigation:true,//横向幻灯片的导航
            //slideNavPosition:'bottom',//横向幻灯片导航的位置//
             scrollOverflow:true,//单页显示滚动条，需要配合scroll的js插件引入


            //  方法组织某方向的滚动 $.fn.fullpage.setAllowScrolling(true,'down'),
            //destory('all')销毁所有动画以及页面的html 和css内容  reBuild()重构



//           下面是一些回调函数
//            afterLoad:function(anchorLink,index){//两个参数分别是锚点链接和页面序号从1开始
//                console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
//            },
//           onLeave:function(index,nextIndex,direction){
//                console.log("onLeave:index="+index+
//                        ";nextIndex="+nextIndex+
//                        ";direction="+direction)
//
//            },
            afterRender:function(){
                console.log("afterRender")
            },
            afterResize:function(){
                console.log("afterResize")
            },
        });
    })

最后再去配合css3的一些动画效果，就可以做出一些产品展示的fullpage页面