<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
width: 100vw;
height: 100vh;
overflow: hidden;
}
transition: .3s;
}
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.list{
margin: 10px 0;
width: 10px;
height: 10px;
background:
border-radius: 5px;
}
.active{
background: red;
}
</style>
</head>
<body>
<div id="container">
<ul id="section">
<li style="background: turquoise;width: 100vw;height: 100vh;"></li>
<li style="background: red;width: 100vw;height: 100vh;"></li>
<li style="background: yellow;width: 100vw;height: 100vh;"></li>
<li style="background: blanchedalmond;width: 100vw;height: 100vh;"></li>
<li style="background: rebeccapurple;width: 100vw;height: 100vh;"></li>
</ul>
<ul id="indexs">
</ul>
</div>
</body>
<script>
let section = document.getElementById('section')
let endTime = +new Date //设置初始时间
let i=0
let indexs = document.getElementById('indexs')
for (let j = 0; j < section.children.length; j++) {
let list = document.createElement('li')
indexs.appendChild(list)
list.classList.add('list')
//上三行创建div，在父元素中的底部插入div，给div设置class选择器
indexs.children[0].classList.add('active')
//给index下的第一个子元素加上class选择器
list.onmouseenter = e=>{
//将有active选择器的元素选中去除该类选择器，给当前鼠标移动到的div添加该样式
let active = indexs.getElementsByClassName('active')[0]
active.classList.remove('active')
list.classList.add('active')
//i=j是为了同步下面的鼠标滚轮切换图片，i是控制切换第几个图片，所以是i=j
i=j
section.style.transform = `translateY(-${100*i}vh)`
}
}
window.onmousewheel = e=>{
console.log(e);
if(+new Date - endTime <500)
//判断时间间隔是为了防止鼠标滑动切换太快，在一定时间间隔，return使鼠标切换图片失效
return console.log('太频繁了');
endTime = +new Date
//e.wheelDelta为负数是鼠标向下滑动，该属性可以通过console.log(e)找到
if(e.wheelDelta<0){
//切换的页面数量可以通过section.children.length得到，当超过或小于等于0时不再切换
if(i>=section.children.length-1) return console.log('到顶了');
i++
}
if(e.wheelDelta>0){
if(i<=0) return console.log('到顶了');
i--
}
let active = indexs.getElementsByClassName('active')[0]
active.classList.remove('active')
indexs.children[i].classList.add('active')
section.style.transform = `translateY(-${100*i}vh)`
}
</script>
</html>
