学习了下老师的思路用自己的方法写了一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
    html,body{
        height: 100%;
        overflow: hidden;
        background: #CCC;
    }
    img{
        width: 100%;
        height: 100%;
    }
    #page{
        width: 100%;
        position: absolute;
    }
</style>
<script>
    $(function(){
    var $show=$(".show");
    var $page=$("#page");
    var i = 0;//纪录当前所显示页面
    //根据大div的个数动态设置page的的高度
    $page.css("height",$show.length*100+"%");
    //动态的平均分配每个show的高度
    $show.css("height",100/$show.length+"%");
    //改写鼠标滚轮事件
    $(document).on("mousewheel DOMMouseScroll",go);//将鼠标滚动事件改为执行go函数
    function go(e){
        e.preventDefault();//取消默认行为
        var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;//后者为火狐鼠标滚动事件属性

       //鼠标向下滑动
        if(value>0 && $page.offset().top>-$show.eq(0).height()*($show.length-1) && !$page.is(":animated")){
            $show.eq(i+1).css("opacity",1);
            $page.animate({top:"+="+(-$show.eq(0).height())+"px"},1000);
            $show.eq(i).animate({opacity:0.4},1000);
            i=i+1;
                          }
        //鼠标向上滑动
        else if(value<0 && $page.offset().top<0 && !$page.is(":animated")){
            $show.eq(i-1).css("opacity",1);
            $page.animate({top:"+="+($show.eq(0).height())+"px"},1000);
            $show.eq(i).animate({opacity:0.4},1000);
            i=i-1;
                              }
    }
    // 窗口大小改变事件处理
    $(window).resize(function(){
        $page.stop().animate({top:(-$show.eq(0).height()*i)+"px"},1000);
    })


})
</script>
<script></script>
<body>
    <div id="page">
        <div class="show"><img src="http://www.hszfk120.com/statics/js/Antelope%20Canyon.jpg" alt=""></div>
        <div class="show"><img src="http://www.hszfk120.com/statics/js/Bahamas%20Aerial.jpg" alt=""></div>
        <div class="show"><img src="http://www.hszfk120.com/statics/js/Beach.jpg" alt=""></div>
        <div class="show"><img src="http://www.hszfk120.com/statics/js/Blue%20Pond.jpg" alt=""></div>
    </div>//服务器还没有备案借用了下以前实习单位的服务器，大家不要乱来。。
</body>
</html>