<!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>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
position: absolute;
z-index: -2;
width: 100%;
}
.box {
width: 100%;
height: 768px;
font-size: 100px;
text-align: center;
line-height: 768px;
}
.box:nth-of-type(even) {
background-color: red;
}
.box:nth-of-type(odd) {
background-color: blue;
}
#btn {
width: 50px;
height: 250px;
position: fixed;
top: 250px;
left: 50px;
}
#btn>button {
width: 50px;
height: 50px;
display: block;
}
</style>
</head>
<body>
<div id="btn">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<section id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</section>
<script>
var btn = document.getElementsByTagName("button");
var box = document.getElementsByClassName("box");
var container = document.getElementById("container")
btn[0].style.backgroundColor = "red"
window.onscroll = function () {
var positionTop = document.documentElement.scrollTop;
console.log(positionTop)
//偏移量除以768,向下取整
for (var i = 0, len = btn.length; i < len; i++) {
btn[i].style.backgroundColor = ""
}
var index = Math.floor(positionTop / 768);
btn[index].style.backgroundColor = 'red'
}
//点击切换页面
var arr = [];
for (var j = 0, len = btn.length; j < len; j++) {
arr.push(btn[j]);
arr[j].onclick = function () {
// console.log(arr.indexOf(this))
var index = arr.indexOf(this);
// console.log(index)
for (var i = 0, len = btn.length; i < len; i++) {
btn[i].style.backgroundColor = ""
}
this.style.backgroundColor = "red"
// container.style.top = -(index * 768) + "px";
document.documentElement.scrollTop = index * 768;
// console.log( index * 768 + "px")
// console.log(document.documentElement.scrollTop)
// console.log(index * 768)
}
}
</script>
</body>
</html>
js轮播页面,点击切换
最新推荐文章于 2023-10-17 17:35:38 发布