介绍一个：全屏插件fullpage

个人博客
如有错误请指正谢谢

fullpage是基于jq的插件：

第一步：导入jq

<script type="text/javascript" src='js/jquery-3.0.0.min.js'></script>

第二步：导入插件

<script type="text/javascript" src='js/jquery.fullPage.min.js'></script>

第三步：调用方法

<!-- 
<!-- 调用 插件的提供的方法 -->
    注意:布局的子页面 class必须拥有 section 

 -->

eg:
http://www.jq22.com/jquery-info1124

<script type="text/javascript">
        $(function(){
            // 插件提供的方法
            $('#dowebok').fullpage({
                paddingTop:150,
                afterLoad:function(anchorLink ,index){
                    console.log(anchorLink+'|||'+index);
                    //  当前页变色 eq方法 需要的索引是 0开始
                    $('.section').eq(index-1).css('backgroundColor','green');
                }
            });
        });
    </script>