jQuery全屏页面滚动带导航自动切换代码

一款jQuery全屏页面滚动带导航自动切换的代码，可点击顶部的导航菜单来切换不同的页面内容，或点击右侧的焦点按钮来切换，鼠标滚动有可以自由切换到对应选项内容。

分类：导航菜单 > 滚动菜单难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需设置好页面元素的样式，引入jQuery库和鼠标滚动插件，并设置好相应的参数，代码如下：

<style type="text/css">
*{margin:0;padding:0;list-style: none;}
a{text-decoration: none;color: #fff;}
.page{width:100%;height:100%;background: pink;}
.page1{background: orange;}
.page2{background: yellow;}
.page3{background: green;}
.page4{background: cyan;}
.containter{width:100%;height:100%;position:absolute;left:0;top:0;}
body,html{height:100%;overflow: hidden;}
.dian{position:absolute;right:20px;top:50%;text-align: center;}
.dian ul{text-align:center;width:14px;}
.dian li{width:10px;height:10px;border-radius: 50%;background: #fff;text-align: center;margin:0 auto;margin-bottom: 10px;cursor:pointer;}
.dian .da{width:14px;height:14px;}
.nav{width:100%;height:100px;background:purple;position:absolute;left:0;top:0;z-index: 111;}
.nav li{float: left;width:100px;height:30px;margin:35px 30px;background: black;cursor:pointer;border-radius: 5px;text-align: center;line-height: 30px;color:#fff;}
.nav li a{width:100px;height:30px;display:block;}
.nav .bg{background: yellow;color:#000;}
</style>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$(function() {
  var nowpage=0;
  var lock=true;
  function donghua(){
    $('.containter').animate({'top': -100*nowpage+'%'}, 500);
    $('.page').eq(nowpage).addClass('current').siblings().removeClass('current');
    $('.dian ul li').eq(nowpage).addClass('da').siblings().removeClass('da');
    $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg');
  }
  $(document).mousewheel(function (event,delta) {
    if(lock){ 
      nowpage=nowpage-delta;
      if(nowpage<0){nowpage=0;}
      if(nowpage>4){nowpage=4;}
       donghua();
      lock=false;
      setTimeout(function  () {
        // body...
        lock=true;
      },1000);
    }
  })
  $('.nav ul li').click(function(event) {
    nowpage=$(this).index();
    if(nowpage<=4){donghua();}
  });
  $('.dian ul li').click(function(event) {
    nowpage=$(this).index();
    donghua();
  });
});
</script>

页面的body部分，分别在不同的div容器里放入两个ul无序列表，用来显示顶部导航菜单和侧栏的焦点按钮，代码如下：

<div class="nav">
  <ul>
    <li class='bg'>首页0</li>
    <li>首页1</li>
    <li>首页2</li>
    <li>首页3</li>
    <li>首页4</li>
  </ul>
</div>
<div class="containter">
  <div class="page current">0</div>
  <div class="page page1">1</div>
  <div class="page page2">2</div>
  <div class="page page3">3</div>
  <div class="page page4">4</div>
</div>
<div class="dian">
  <ul>
    <li class='da'></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>