html+css3+jquery全屏页面跟随导航切换滚动

1、新建html文档。

2、书写hmtl代码。

<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'>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

  </ul>

</div>

3、书写css代码。

<style>

* { 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>

4、书写并添加js代码。

<script src="js/jquery-1.11.2.min.js"></script>

<script src="js/jquery.mousewheel.min.js"></script>

<script>

$(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  () {

        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>

5、代码整体结构。

6、查看效果。