整屏滚动，滚轮/键盘控制

//鼠标滚轮事件
            wheelscroll: function () {
                var speed = 500;
                var canS = true;
                //是否能够进行下一次滚动
                var canSlide = true;
                //当前展示的li的index
                var slide_sum = 0;
                //轮播容器
                var document_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;   //height
                var ul = $('.slides');
                var li = ul.children('li');
                var li_length = li.length;
                //初始化轮播容器宽度
                ul.css({'height': document_height * li_length});
                // jquery 兼容的滚轮事件
                $(document).on("mousewheel DOMMouseScroll", function (e) {
                    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));                    // firefox
                    if (delta > 0 && canSlide) {// 向上滚
                        scrollUp();
                    } else if (delta < 0 && canSlide) {// 向下滚
                        scrollDown();
                    }
                });
                //键盘事件
                document.onkeydown = function (event) {
                    var event = event || window.event || arguments.callee.caller.arguments[0];
                    if (event && event.keyCode == 37) { // 按 ←
                        scrollUp();
                    }
                    if (event && event.keyCode == 38) { // 按 ↑
                        scrollUp();
                    }
                    if (event && event.keyCode == 39) { // 按 →
                        scrollDown();
                    }
                    if (event && event.keyCode == 40) { // 按 ↓
                        scrollDown();
                    }
                };
                function startS() {
                    //滚动时需要进行的额外操作，动态交互之类
                }

                function endS() {
                    //滚动结束后的操作
                }

                //上滚
                var scrollUp = function () {
                    canSlide = false;//开关
                    slide_sum--;
                    if (slide_sum === 0 || slide_sum < 0) {
                        if (canS) {
                            startS();
                        }
                        ul.animate({
                            'margin-top': 0
                        }, speed, function () {
                            canSlide = true;
                            slide_sum = 0;
                            endS();
                            canS = false;
                        });
                    } else {
                        canS = true;
                        startS();
                        ul.animate({
                            'margin-top': -document_height * slide_sum
                        }, speed, function () {
                            canSlide = true;
                            endS();
                        });
                    }
                };
                //下滚
                var scrollDown = function () {
                    canSlide = false;//开关
                    slide_sum++;
                    if (slide_sum === (li_length - 1) || slide_sum > (li_length - 1)) {
                        if (canS) {
                            startS();
                        }
                        ul.animate({
                            'margin-top': -document_height * (li_length - 1)
                        }, speed, function () {
                            slide_sum = li_length - 1;
                            canSlide = true;
                            endS();
                            canS = false;
                        });
                    } else {
                        canS = true;
                        startS();
                        ul.animate({
                            'margin-top': -document_height * slide_sum
                        }, speed, function () {
                            canSlide = true;
                            endS();
                        });
                    }
                }
            }

html部分

<ul class="slides">
        <!--第一屏-->
        <li class="slide-li"></li>
        <!--第二屏-->
        <li class="slide-li"></li>
        <!--第三屏-->
        <li class="slide-li"></li>
    </ul>

css（LESS）部分

.slides {
    width: 100%;
    height: 100vh;
    .slide-li {
      width: 100%;
      height: 100vh;
      background: url(../images/index01.jpg) no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      position: relative;
      &:nth-child(2) {
        
      }
      &:nth-child(3) {
        
      }
    }
  }