Javascript 如何创建全屏幻灯片

有人能帮我创建全屏幻灯片完全像下面的网站。。。 浏览器滚动条隐藏，当向上/向下滚动或按向上/向下键时，幻灯片移动到下一屏幕，活动点根据幻灯片更改

$（“导航a”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（$（this.attr（'href'））.offset（）.top
}, 1000);
});
*{
框大小：边框框；
-webkit框大小：边框框；
}
身体{
边际：0px；
溢出：隐藏；
}
.盒子{
显示：表格；
宽度：100vw；
高度：100vh；
}
.box{背景色：rgb（179235 255）；}
.box+.box{背景色：rgb（217255 228）；}
.box+.box+.box{背景色：rgb（255、221、255）；}
.box+.box+.box+.box{背景色：rgb（255190190）；}
.box+.box+.box+.box+.box{背景色：rgb（253176255）；}
.box+.box+.box+.box+.box+.box+.box{背景色：rgb（0,26,73）；颜色：#fff；}
.box+.box+.box+.box+.box+.box+.box+.box{背景色：rgb（23,0,4）；}
.内部{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：1vw；
}
导航{
位置：固定；
z指数：999；
最高：50%；
右：20px；
}
导航a：链接，
导航a：已访问{
显示：块；
宽度：10px；
高度：10px；
边缘底部：10px；
光标：指针；
背景色：#222；
边界半径：50%；
}

家
服务
团队
近期工作
过程
常见问题
接触
看看impress.js，它为您提供了一个已经可以工作的框架，您只需组合元素即可


编辑

另一个框架是fullPage.js

您是否尝试过实施一些措施？如果是这样，请发布您的代码并具体说明问题。@prudhvi我添加了代码段。您知道
：nth-cild（）
选择器，对吗？据我所见，这似乎有效？感谢您的输入，但我无法用它实现我的目标，我真正需要的是上下滚动和上下箭头键功能，以移动我的幻灯片下一个/上一个。我认为新的是你正在寻找的。