首先就是简单的HTML部分：
<div class="sxt-wrapper"> <ul class="sxt-wrapper-scroll"> <li><video src="img/h.mp4" id="video" loop="loop" autoplay="autoplay"></video></li> <li><img src="img/201702151453082348.jpg"></li> <li><img src="img/e.png"></li> <li><img src="img/201702151453082348.jpg"></li> <li><img src="img/e.png"></li> </ul><!--首先这是全屏区域--> <ul class="sxt-scroll-menu"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul><!--这是右侧小圆点--> </div>
接下来是样式（css）部分：
<style> *{margin: 0;padding: 0;} ul{list-style: none;} .sxt-wrapper{width:100%;height: 100vh;overflow: hidden;} /*100vh指的是可视区域分成100份，并且超出部分隐藏*/ .sxt-wrapper .sxt-wrapper-scroll{position: relative;} .sxt-wrapper .sxt-wrapper-scroll li{width: 100%;height: 100vh;} .sxt-wrapper .sxt-wrapper-scroll li img{ width: 100%;height: 100%; }/*因为是全屏滚动，所以一个板块占据100%整个屏幕*/ .sxt-wrapper .sxt-wrapper-scroll li video{width: 100%;height: 100%;object-fit: fill;object-position: center center;}/*object-fit: fill;是和background-size相似的属性
它可以设置这个对象的填充类型，fill代表不保持比例，填充整个容器，其余常用属性为cover 则为保持比例，填充整个容器*/ .sxt-scroll-menu{ position: fixed; right: 20px; z-index: 999; top:40%; }/*把几个小点固定定位到网页右侧，并显示到最顶层*/ .sxt-scroll-menu li.sxt-scroll-menu-active{background: white;} .sxt-scroll-menu li{cursor:pointer;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;margin-bottom: 20px;} </style>
接下来引入JQuery库文件
编写JQ代码
$(function(){ var i = 0; var omark = false;//定义的开关
var p=false;//定义的关于键盘的开关
document.οnkeydοwn=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0];//兼容 if(omark)return; if(p)return; p=true;//防止按住不放导致的BUG omark = true; if(e && e.keyCode==38 || e && e.keyCode==37){//上 i--; if(i<0){i=0}; if(i==0){ $('#video').get(0).play();} else{ $('#video').get(0).pause(); } $('.sxt-wrapper-scroll').stop(true).animate({top:'-'+i*100+'%'},500,function(){omark=false}); } if(e && e.keyCode==40 || e && e.keyCode==39){//下 i++; if(i>4){i=0}; if(i==0){ $('#video').get(0).play();} else{ $('#video').get(0).pause(); } $('.sxt-wrapper-scroll').stop(true).animate({top:'-'+i*100+'%'},500,function(){omark=false}); } $('.sxt-scroll-menu li').eq(i).addClass('sxt-scroll-menu-active').siblings().removeClass('sxt-scroll-menu-active') }; document.οnkeyup=function(){ p=false;//当松开的时候改变boolean值 } $(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(omark)return;//解决滑动BUG omark = true; if (delta > 0) { // 向上滚 i--; if(i==0){ $('#video').get(0).play();}//如果是第一个屏幕那就让视频播放 if(i<0){i=0}; $('.sxt-wrapper-scroll').animate({top:'-'+i*100+'%'},500,function(){omark=false});//这是让ul的top值变动，从而实现滚动 } else if (delta < 0) { // 向下滚 $('#video').get(0).pause();//不是第一个屏幕就让视频暂停 i++; if(i>4){i=0};//如果是最后一个屏幕了，再次滑动就让它滚动到第一屏 $('.sxt-wrapper-scroll').animate({top:'-'+i*100+'%'},500,function(){omark=false});//回调函数让开关变成关闭的状态 } $('.sxt-scroll-menu li').eq(i).addClass('sxt-scroll-menu-active').siblings().removeClass('sxt-scroll-menu-active')//控制圈圈的样式 }) $('.sxt-scroll-menu li').eq(0).addClass('sxt-scroll-menu-active'); $('.sxt-scroll-menu li').mouseover(function(){ var index = $(this).index(); i=$(this).index(); $(this).addClass('sxt-scroll-menu-active').siblings().removeClass('sxt-scroll-menu-active') $('.sxt-wrapper-scroll').stop(true).animate({top:'-'+index*100+'%'},500); if(index==0){ $('#video').get(0).play();} else{ $('#video').get(0).pause(); } }) });
那么整体的基本的全屏滚动已经做出来了，大神勿喷，仅供初级参考，代码冗余，可以再进行优化。
