<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
transition: all .3s ease;
}
.container .section {
width: 100%;
height: 100%;
display: flex;
color: #83a78d;
justify-content: center;
align-items: center;
background-size: cover;
}
.controls {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
list-style: none;
}
.controls li {
width: 50px;
height: 50px;
font: bold 22px/50px '楷体';
background-color: #8869a5;
color: #B1BEEA;
cursor: pointer;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.controls li+li {
margin-top: 5px;
}
.controls li.active {
background-color: #fff;
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="section page1">
<div>第一屏</div>
</div>
<div class="section page2">
<div>第二屏</div>
</div>
<div class="section page3">
<div>第三屏</div>
</div>
<div class="section page4">
<div>第四屏</div>
</div>
<div class="section page5">
<div>第五屏</div>
</div>
</div>
<ul class="controls">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var container = document.querySelector(".container");
var lis = document.querySelectorAll(".controls li");
var viewHeight = null;
var index = 0;
var flag = true;
document.addEventListener('mousewheel', function(e) {
e = e || window.event;
e.preventDefault();
viewHeight = document.body.clientHeight;
if (flag) {
flag = false;
if (e.wheelDelta > 0) {
index--;
if (index < 0) {
index = 0;
}
} else {
index++;
if (index > lis.length - 1) {
index = lis.length - 1;
}
}
container.style.top = -index * viewHeight + "px";
sibilings(index);
setTimeout(function() {
flag = true
}, 500)
}
}, {
passive: false,
useCapture: false
})
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
viewHeight = document.body.clientHeight;
index = this.index;
console.log(index);
sibilings(index);
container.style.top = -index * viewHeight + "px";
}
}
function sibilings(index) {
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
}
console.log(index);
lis[index].className = 'active';
}
</script>
</body>
</html>
03-21
2569
06-14
716