其實也就是垂直輪播圖的原理，當然可以直接使用輪播圖組件去實現，在網上看到一個用很簡單的代碼就實現了的,一看就懂。
發現一個小bug，我把導航加上了名稱並且把hover改為了click，假如當前是第一頁，當我先點擊了第四頁，翻頁到第四頁，此時用鼠標滾輪向下滾動，是會翻到第二頁，這就需要在點擊翻頁函數中更新當前所在的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<!--
@time: 2018-08-04
@version: 0.0.1
@author: Mortal
-->
<style type="text/css">
/*
* 說明：
* 標注為慎刪的屬性暫時認定可以刪除，即在作者測試的環境下刪除暫時沒有影響，但不代表所有環境下刪除都沒有影響
* 其他屬性一概不可以刪除
*/
html,
body {
height: 100%;
}
body,
ul,
li,
a,
p,
div {
/*慎刪*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
}
#main {
top: 0;
position: relative;
}
.page {
/*謹刪*/
width: 100%;
margin: 0;
}
#pageUl {
position: fixed;
right: 10px;
}
</style>
</head>
<body>
<!--
每個全屏頁面div的class為page，其中的圖片的class為pageImg
ul為右側的導航欄
pageUlLi和page的數目必須相等，修改數目時還應修改最下面js鼠標懸停的跳轉代碼
-->
<div id="wrap">
<div id="main">
<ul id="pageUl" type="circle">
<li id="pageUlLi1" class="pageUlLi" style="color: red;"> </li>
<li id="pageUlLi2" class="pageUlLi"> </li>
<li id="pageUlLi3" class="pageUlLi"> </li>
<li id="pageUlLi4" class="pageUlLi"> </li>
<li id="pageUlLi5" class="pageUlLi"> </li>
</ul>
<div style="background-color: #1b6d85" id="page1" class="page">
</div>
<div style="background-color: #5cb85c" id="page2" class="page">
</div>
<div style="background-color: #8a6d3b" id="page3" class="page">
</div>
<div style="background-color: #337ab7" id="page4" class="page">
</div>
<div style="background-color: #66512c" id="page5" class="page">
</div>
</div>
</div>
</body>
<script type="text/javascript">
//改變窗口大小時調整圖片大小
window.onload = resizeImages;
window.onresize = resizeImages;
function resizeImages() {
$(function (e) {
var screenWeight = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
$("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);
$("#pageUl").css("bottom", screenHeight >> 1);
});
}
var index = 1;
var curIndex = 1;
var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var hei = document.body.clientHeight;
wrap.style.height = hei + "px";
var obj = document.getElementsByTagName("div");
for (var i = 0; i < obj.length; i++) {
if (obj[i].className == 'page') {
obj[i].style.height = hei + "px";
}
}
var pageNum = document.querySelectorAll(".page").length;
//如果不加時間控制，滾動會過度靈敏，一次翻好幾屏
var startTime = 0, //翻屏起始時間
endTime = 0,
now = 0;
//瀏覽器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
document.addEventListener("DOMMouseScroll", scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", scrollFun);
} else {
document.onmousewheel = scrollFun;
}
//滾動事件處理函數
function scrollFun(event) {
startTime = new Date().getTime();
var delta = event.detail || (-event.wheelDelta);
//mousewheel事件中的 “event.wheelDelta” 屬性值：返回的如果是正值說明滾輪是向上滾動
//DOMMouseScroll事件中的 “event.detail” 屬性值：返回的如果是負值說明滾輪是向上滾動
if ((endTime - startTime) < -1000) {
if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {
//向下滾動
index++;
toPage(index);
}
if (delta < 0 && parseInt(main.offsetTop) < 0) {
//向上滾動
index--;
toPage(index);
}
endTime = new Date().getTime();
} else {
event.preventDefault();
}
}
function toPage(idx) {
//jquery實現動畫效果
if(idx!=curIndex){
index=idx
var delta=idx - curIndex;
now = now - delta * hei;
$("#main").animate({
top: (now + 'px')
}, 500);
curIndex = idx;
//更改列表的選中項
$(".pageUlLi").css("color", "black");
$("#pageUlLi" + idx).css("color", "red");
}
}
// //鼠標懸停翻頁
// document.getElementById("pageUlLi1").onmouseover = function () {
// toPage(1);
// }
// document.getElementById("pageUlLi2").onmouseover = function () {
// toPage(2);
// }
// document.getElementById("pageUlLi3").onmouseover = function () {
// toPage(3);
// }
// document.getElementById("pageUlLi4").onmouseover = function () {
// toPage(4);
// }
// document.getElementById("pageUlLi5").onmouseover = function () {
// toPage(5);
// }
//鼠標點擊翻頁
document.getElementById("pageUlLi1").onclick = function () {
toPage(1);
}
document.getElementById("pageUlLi2").onclick = function () {
toPage(2);
}
document.getElementById("pageUlLi3").onclick = function () {
toPage(3);
}
document.getElementById("pageUlLi4").onclick = function () {
toPage(4);
}
document.getElementById("pageUlLi5").onclick = function () {
toPage(5);
}
</script>
</html>