整屏滚动

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>整页滚动</title>
   <link rel="stylesheet" type="text/css" href="css/test.css">
   <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
   <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
   <script type="text/javascript">
      $(function(){

         var $h = $(window).height();
         var $pages = $('.pages');
         $pages.css({height:$h});
         var $points = $('.points li');
         var nowscreen = 0;
         var timer = null;

         $pages.eq(0).addClass('moving');



         $(window).mousewheel(function(ev,dat){

            clearTimeout(timer);

            timer = setTimeout(function(){

            if(dat==-1)
            {
               nowscreen++;
            }
            else
            {
               nowscreen--;
            }

            if(nowscreen<0)
            {
               nowscreen=0;
            }

            if(nowscreen>4)
            {
               nowscreen=4
            }

            $('.pages_con').animate({top:-nowscreen*$h},300);

            $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
            $points.eq(nowscreen).addClass('active').siblings().removeClass('active');

            },200)          

         })

         $points.click(function(event) {

            var nowindex = $(this).index();

            $('.pages_con').animate({top:-nowindex*$h},300);

            $pages.eq(nowindex).addClass('moving').siblings().removeClass('moving');
            $points.eq(nowindex).addClass('active').siblings().removeClass('active');

         });

      })

   </script>  
</head>
<body>
   <div class="pages_con">

      <div class="pages page1">
         <div class="main_con">
            <div class="left_img"><img src="images/001.png"></div>
            <div class="right_info">
            Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
               
            </div>
         </div>
      </div>

      <div class="pages page2">
         <div class="main_con">
            <div class="right_img"><img src="images/002.png"></div>
            <div class="left_info">
            2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
            </div>
         </div>
         
      </div>

      <div class="pages page3">
         <div class="main_con">
            <div class="left_img"><img src="images/004.png"></div>
            <div class="right_info">
            以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

               
            </div>
         </div>       
      </div>

      <div class="pages page4">
         <div class="main_con">
            <div class="left_img"><img src="images/003.png"></div>
            <div class="right_info">
               Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
            </div>
         </div>       
      </div>

      <div class="pages page5">
         <div class="main_con">
            <div class="center_img"><img src="images/005.png"></div>      
         </div>
         
      </div>
   </div>
   <ul class="points">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</body>
</html>

test.css:

body,ul{
   margin:0;
   padding:0;
}

ul{list-style:none;}

.pages_con{
   position:fixed;
   left:0;
   top:0;
   100%;
   overflow:hidden;
}

.pages{
   height:600px;
   position:relative;
}
.page1{    background-color:orange;}
.page2{    background-color:lightgreen;}
.page3{    background-color:cyan;}
.page4{    background-color:pink;}
.page5{    background-color:lightblue;}


.points{
   16px;
   height:176px;
   position:fixed;
   right:20px;
   top:50%;
   margin-top:-88px;
}

.points li{
   13px;
   height:13px;
   margin:16px 0;
   border-radius:50%;
   border:1px solid #666;
   cursor:pointer;
}

.points li.active{
   background-color:#666;
}

.main_con{
   900px;
   height:400px;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-450px;
   margin-top:-200px;
}

.main_con .left_img{
   363px;
   height:400px;
   float:left;
   position:relative;
   left:-50px;
   opacity:0;
   filter:alpha(opacity=0);
   transition:all 1000ms ease 300ms;
}

.main_con .right_info{
   500px;
   height:300px;
   margin-top:50px;
   float:right;
   font-family:'Microsoft Yahei';
   font-size:20px;
   line-height:50px;
   color:#666;
   text-indent:2em;
   text-align:justify;
   position:relative;
   right:-50px;
   opacity:0;
   filter:alpha(opacity=0);
   transition:all 1000ms ease 300ms;
}


.moving .main_con .left_img{
   left:0;
   opacity:1;
   filter:alpha(opacity=100);
}

.moving .main_con .right_info{
   right:0;
   opacity:1;
   filter:alpha(opacity=100);
}




.main_con .right_img{
   522px;
   height:400px;
   float:right;
   position:relative;
   top:-50px;
   opacity:0;
   filter:alpha(opacity=0);
   transition:all 1000ms ease 300ms;
}

.main_con .left_info{
   350px;
   height:300px;
   margin-top:50px;
   float:left;
   font-family:'Microsoft Yahei';
   font-size:20px;
   line-height:50px;
   color:#666;
   text-indent:2em;
   text-align:justify;
   position:relative;
   bottom:-50px;
   opacity:0;
   filter:alpha(opacity=0);
   transition:all 1000ms ease 300ms;
}


.moving .main_con .right_img{
   top:0;
   opacity:1;
   filter:alpha(opacity=100);
}

.moving .main_con .left_info{
   bottom:0;
   opacity:1;
   filter:alpha(opacity=100);
}




.main_con .center_img{
   611px;
   height:337px;
   position:absolute;
   left:50%;
   margin-left:-305px;
   bottom:-50px;
   opacity:0;
   filter:alpha(opacity=0);
   transition:all 1000ms ease 300ms;

}


.moving .main_con .center_img
{
   bottom:0;
   opacity:1;
   filter:alpha(opacity=100);