2023-03-22_DOMDAY07-滚动条以及轮播
2023-03-22 本文已影响0人
远方的路_
1. 添加自定义滚动条
页面的最外层是document,紧接着是初始包含块，html， body，其次是我们的元素，禁止了系统的滚动条，（因为各大浏览器的系统滚动条风格不一，有可能会影响我们的页面布局），所以在body当中我们一般会有最外的一个盒子模拟body区域，在这个盒子的右侧会定位一个盒子模拟滚动条
-
滚动条长度设置（注意样式中原本定死的滚动条）
- 自定义滚动条的万能比例：
滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度 = 滑块滚动距离 / 内容的滚动距离
- 滚动条和内容联动（注意方向）
- 自定义滚动条的万能比例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>滚动条-滚动条联动内容</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
overflow: hidden;
}
/* body同宽同高 */
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.wrapper .scroll {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 30px;
border-left: 1px solid #666;
border-right: 1px solid #666;
background-color: aquamarine;
}
.wrapper .scroll .scrollIn {
position: absolute;
/* height: 100px; */
width: 30px;
background-color: tomato;
}
.wrapper .content {
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- 内容区 -->
<div class="content"></div>
<!-- 滑槽 -->
<div class="scroll">
<!-- 滑块 -->
<div class="scrollIn">
</div>
</div>
</div>
<script>
// 1.拖拽滚动条
// 2.边界
// 3.生成内容
// 4.滑块联动内容
// 5.滚轮联动滑块
// 6.滚轮联动内容
var scrollIn = document.querySelector('.wrapper .scroll .scrollIn');
var content = document.querySelector('.wrapper .content');
// 内容
for(var i = 1; i <= 200; i++){
content.innerHTML += i + '<br>';
}
// 因为不涉及滑动 所以在哪写都可以
// 根据内容展示滑块的高度
// 滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度
// 滑块的高度 滑槽的高度
// --------- = -----------
// 滑槽的高度 内容的高度
// 滑块的高度 = (滑槽的高度 / 内容的高度 ) * 滑槽的高度
// (滑槽的高度 / 内容的高度 )
var scale = document.documentElement.clientHeight / content.clientHeight;
// (滑槽的高度 / 内容的高度 ) * 滑槽的高度
var scrollIn_h = scale * document.documentElement.clientHeight;
scrollIn.style.height = scrollIn_h + 'px';
// 滑槽和滑块
scrollIn.onmousedown = function(event){
var eleY = scrollIn.offsetTop;
var startY = event.clientY;
document.onmousemove = function(event){
var endY = event.clientY;
var disY = endY - startY;
var lastY = disY + eleY;
// 边界
if(lastY >= document.documentElement.clientHeight - scrollIn.clientHeight){
lastY = document.documentElement.clientHeight - scrollIn.offsetHeight;
}else if(lastY <= 0){
lastY = 0;
}
scrollIn.style.top = lastY + 'px';
// 滑块动完了之后 内容跟着动
// 滑槽的高度 / 内容的高度 = 滑块滚动距离--滑块的最终位置 / 内容的滚动距离
// 内容的滚动距离 = 滑块滚动距离 / (滑槽的高度 / 内容的高度)
var content_h = lastY / scale;
content.style.top = -content_h + 'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
}
</script>
</body>
</html>
2. 滚轮事件基础
区分上下
-
ie/chrome : mousewheel(dom2的标准模式)
event.wheelDelta- 上：120
- 下：-120
- 上和下指的是滚轮的方向
-
firefox: DOMMouseScroll(dom2的标准模式)
event.detail- 上：-3
- 下：3
- 上和下指的是滚轮的方向
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>02_滚动条-静态页面搭建</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
overflow: hidden;
}
/* body同宽同高 */
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.wrapper .scroll {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 30px;
border-left: 1px solid #666;
border-right: 1px solid #666;
background-color: aquamarine;
}
.wrapper .scroll .scrollIn {
position: absolute;
/* height: 100px; */
width: 30px;
background-color: tomato;
}
.wrapper .content {
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- 内容区 -->
<div class="content"></div>
<!-- 滑槽 -->
<div class="scroll">
<!-- 滑块 -->
<div class="scrollIn">
</div>
</div>
</div>
<script>
// 1.拖拽滚动条
// 2.边界
// 3.生成内容
// 4.滑块联动内容
// 5.滚轮联动滑块
// 6.滚轮联动内容
var scrollIn = document.querySelector('.wrapper .scroll .scrollIn');
var content = document.querySelector('.wrapper .content');
// 内容
for(var i = 1; i <= 200; i++){
content.innerHTML += i + '<br>';
}
// 因为不涉及滑动 所以在哪写都可以
// 根据内容展示滑块的高度
// 滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度
// 滑块的高度 滑槽的高度
// --------- = -----------
// 滑槽的高度 内容的高度
// 滑块的高度 = (滑槽的高度 / 内容的高度 ) * 滑槽的高度
// (滑槽的高度 / 内容的高度 )
var scale = document.documentElement.clientHeight / content.clientHeight;
// (滑槽的高度 / 内容的高度 ) * 滑槽的高度
var scrollIn_h = scale * document.documentElement.clientHeight;
scrollIn.style.height = scrollIn_h + 'px';
// 滑槽和滑块
scrollIn.onmousedown = function(event){
var eleY = scrollIn.offsetTop;
var startY = event.clientY;
document.onmousemove = function(event){
var endY = event.clientY;
var disY = endY - startY;
var lastY = disY + eleY;
// 边界
if(lastY >= document.documentElement.clientHeight - scrollIn.clientHeight){
lastY = document.documentElement.clientHeight - scrollIn.offsetHeight;
}else if(lastY <= 0){
lastY = 0;
}
scrollIn.style.top = lastY + 'px';
// 滑块动完了之后 内容跟着动
// 滑槽的高度 / 内容的高度 = 滑块滚动距离--滑块的最终位置 / 内容的滚动距离
// 内容的滚动距离 = 滑块滚动距离 / (滑槽的高度 / 内容的高度)
var content_h = lastY / scale;
content.style.top = -content_h + 'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
}
// 滚轮联动滑块
function move(event){
var flag;
if(event.wheelDelta){
if(event.wheelDelta > 0){
flag = true;
}else{
flag = false;
}
}else{
if(event.detail < 0){
flag = true;
}else {
flag = false;
}
}
if(flag){
var lastY = scrollIn.offsetTop - 10;
if(lastY <= 0){
lastY = 0;
}
scrollIn.style.top = lastY + 'px';
// 滚轮联动内容
// 内容的滚动距离 = 滑块滚动距离 / (滑槽的高度 / 内容的高度)
var content_wheel_h = scrollIn.offsetTop / scale;
content.style.top = -content_wheel_h + 'px';
}else {
var lastY = scrollIn.offsetTop + 10;
if(lastY >= document.documentElement.clientHeight - scrollIn.offsetHeight){
lastY = document.documentElement.clientHeight - scrollIn.clientHeight;
}
scrollIn.style.top = lastY + 'px';
// 滚轮联动内容
var content_wheel_h = scrollIn.offsetTop / scale;
content.style.top = -content_wheel_h + 'px';
}
}
window.addEventListener('mousewheel',move);
window.addEventListener('DOMMouseScroll',move);
</script>
</body>
</html>
3. 轮播
- 需求分析
- （1）瞬变-右
- （2）瞬变-左
- （3）瞬变-封装
- （4）渐变-右
- （5）渐变-左
- （6）渐变-封装
- （7）无限轮播
- （8）图片联动小圆点
- （9）小圆点联动图片
- （10）自动轮播
- （11）鼠标移入悬停
- （12）定时器叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
img{
display: block;
/*vertical-align: middle;*/
}
a{
text-decoration: none;
}
input{
outline: none;
}
.clearFix:after{
content: '';
display: table;
clear: both;
}
#box{
position: relative;
width: 600px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
#box .list{
position: absolute;
width: 4200px;
height: 300px;
left: -600px;
}
#box .list li{
float: left;
width: 600px;
height: 300px;
}
#box .list li img{
width: 600px;
height: 300px;
}
#box span{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 100px;
background-color: rgba(200,200,200,.7);
font-size: 50px;
text-align: center;
line-height: 100px;
color: white;
opacity: 0;
transition: opacity 2s;
}
#box .left{
left: 0;
}
#box .right{
right: 0;
}
#box .iconList{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
overflow: hidden;
}
#box .iconList li{
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
background-color: gray;
}
#box .iconList li.current{
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="left"> < </span>
<span class="right"> > </span>
<ul class="iconList">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var box = document.querySelector('#box');
var span_list = document.querySelectorAll('#box span');
var timer = null;
// 移入显示左右
// #region
box.onmouseenter = function(){
span_list[0].style.opacity = '.7';
span_list[1].style.opacity = '.7';
}
box.onmouseleave = function(){
span_list[0].style.opacity = 0;
span_list[1].style.opacity = 0;
}
//#endregion
var ul = document.querySelector('.list');
// 需求分析
// （1）瞬变-右
// #region
// span_list[1].onclick = function(){
// // ul的起始位置
// var startX = ul.offsetLeft;
// // 每每点击一次 那么移动的步长就是一张图片
// // 图片的宽度是600 又因为向左移动 所以是-600
// var step = -600;
// // 最终位置
// var endX = startX + step;
// ul.style.left = endX + 'px';
// }
// #endregion
// （2）瞬变-左
//#region
// span_list[0].onclick = function(){
// // 获取ul的起始位置的偏移量
// var startX = ul.offsetLeft;
// // 设置步长
// var step = 600;
// // 获取结束位置
// var endX = startX + step;
// ul.style.left = endX + 'px';
// }
//#endregion
// （3）瞬变-封装
//#region
// function move(flag){
// var startX = ul.offsetLeft;
// var step = flag;
// var endX = startX + step;
// ul.style.left = endX + 'px';
// }
// span_list[1].onclick = function(){
// move(-600);
// }
// span_list[0].onclick = function(){
// move(600);
// }
//#endregion
// （4）渐变-右
//#region
// span_list[1].onclick = function(){
// // 从0开始 每走动一张图片之后停
// // 以下三行代码 代表的是每次点击最终要停止的位置
// // 获取ul的偏移量
// var ul_offsetLeft = ul.offsetLeft;
// // 每一次要移动的距离
// var move_dis = -600;
// // 最终要停止的位置
// var lastX = ul_offsetLeft + move_dis;
// timer = setInterval(function(){
// var startX = ul.offsetLeft;
// var step = -30;
// var endX = startX + step;
// if(endX == lastX){
// clearInterval(timer);
// }
// ul.style.left = endX + 'px';
// },30)
// }
//#endregion
// （5）渐变-左
//#region
// span_list[0].onclick = function(){
// var ul_offsetLeft = ul.offsetLeft;
// var move_dis = 600;
// var lastX = ul_offsetLeft + move_dis;
// timer = setInterval(function(){
// var startX = ul.offsetLeft;
// var step = 30;
// var endX = startX + step;
// if(endX == lastX){
// clearInterval(timer);
// }
// ul.style.left = endX + 'px';
// },30)
// }
//#endregion
// （6）渐变-封装
//#region
function move(flag){
// 点击停止的位置
var ul_offsetLeft = ul.offsetLeft;
var move_dis;
if(flag){
move_dis = -600;
}else{
move_dis = 600;
}
var lastX = ul_offsetLeft + move_dis;
// 一张图片移动的时间
var allTime = 600;
// 一步移动的时间
var stepTime = 30;
// 一张图片移动多少步 20
var stepNum = allTime / stepTime;
// 每一步移动的
timer = setInterval(function(){
var startX = ul.offsetLeft;
// var step;
// if(flag){
// step = -30;
// }else {
// step = 30;
// }
// 总的距离/ 步数 ==>步长
// 右：-600 / 20
// 左：600 / 20
var step = move_dis / stepNum;
var endX = startX + step;
if(endX == lastX){
clearInterval(timer);
}
// 无限轮播
if(endX == -3600){
endX = -600;
}else if(endX == 0){
endX = -3000;
}
ul.style.left = endX + 'px';
},stepTime);
}
span_list[1].onclick = function(){
move(true);
}
span_list[0].onclick = function(){
move(false);
}
//#endregion
// （7）无限轮播
// （8）图片联动小圆点
// （9）小圆点联动图片
// （10）自动轮播
// （11）鼠标移入悬停
// （12）定时器叠加
</script>
</body>
</html>
-
完善轮播图
-
定时器叠加问题
- 发生情况：连续点击 定时器执行的时间的间隔很短
- 定义变量然后加判断能否执行 再把变量值改变
- 发生情况：连续点击 定时器执行的时间的间隔很短
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
img {
display: block;
/*vertical-align: middle;*/
}
a {
text-decoration: none;
}
input {
outline: none;
}
.clearFix:after {
content: '';
display: table;
clear: both;
}
#box {
position: relative;
width: 600px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
#box .list {
position: absolute;
width: 4200px;
height: 300px;
left: -600px;
}
#box .list li {
float: left;
width: 600px;
height: 300px;
}
#box .list li img {
width: 600px;
height: 300px;
}
#box span {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 100px;
background-color: rgba(200, 200, 200, .7);
font-size: 50px;
text-align: center;
line-height: 100px;
color: white;
opacity: 0;
transition: opacity 2s;
}
#box .left {
left: 0;
}
#box .right {
right: 0;
}
#box .iconList {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
overflow: hidden;
}
#box .iconList li {
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
background-color: gray;
}
#box .iconList li.current {
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
<span class="left">
< </span>
<span class="right"> > </span>
<ul class="iconList">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var box = document.querySelector('#box');
var span_list = document.querySelectorAll('#box span');
var ul = document.querySelector('#box .list');
var timer = null;
var icon_list = document.querySelectorAll('.iconList li');
var auto_timer = null;
box.onmouseenter = function () {
span_list[0].style.opacity = '.7';
span_list[1].style.opacity = '.7';
clearInterval(auto_timer);
}
box.onmouseleave = function () {
span_list[0].style.opacity = 0;
span_list[1].style.opacity = 0;
auto_play();
}
// 需求分析
// （1）瞬变-右
// （2）瞬变-左
// （3）瞬变-封装
// （4）渐变-右
// （5）渐变-左
// （6）渐变-封装
// （7）无限轮播
for (var i = 0; i < icon_list.length; i++) {
icon_list[i].index = i;
icon_list[i].onclick = function () {
// move();
// 点谁 就要小圆点的下标
// console.log(this.index);
// 点谁 要图片的下标
// console.log(this.index + 1);
// 点谁 图片的偏移量
move((this.index + 1) * -600);
}
}
// 自动轮播
auto_play();
function auto_play() {
auto_timer = setInterval(function () {
move(true);
}, 2000);
}
var is_move = false;
function move(flag) {
if (is_move) {
return;
}
is_move = true;
var ul_offset = ul.offsetLeft;
// 移动的距离
var move_dis;
if (typeof flag == 'boolean') {
if (flag) {
move_dis = -600;
} else {
move_dis = 600;
}
} else {
// flag代表的是点击之后的图片的偏移量
// ul.offsetLeft 代表点击之前的偏移量
move_dis = flag - ul.offsetLeft;
}
var lastX = ul_offset + move_dis;
var allTime = 600;
var stepTime = 30;
var stepNum = allTime / stepTime;
timer = setInterval(function () {
var startX = ul.offsetLeft;
var step = move_dis / stepNum;
var endX = startX + step;
if (endX == lastX) {
clearInterval(timer);
is_move = false;
if (endX == -3600) {
endX = -600;
} else if (endX == 0) {
endX = -3000;
}
}
ul.style.left = endX + 'px';
}, stepTime);
// （8）图片联动小圆点
// 思路：当前图片对应的小圆点会变成红色
// 图片和小圆点的对应关系
// 7张图片 5个小圆点
// 找到图片的下标 然后减一就是小圆点的下标
// 如何找到图片的下标 用ul的偏移量除以-600就可以得到
// 让所有的li状态统一
for (var i = 0; i < icon_list.length; i++) {
icon_list[i].className = '';
}
// 让当前的图片对应的那个小圆点的class=current
// 小圆点的下标 （移动之后的图片的偏移量/-600=图片的下标）
var index = lastX / -600 - 1;
if (index > 4) {
index = 0;
} else if (index < 0) {
index = 4;
}
icon_list[index].className = 'current';
}
span_list[1].onclick = function () {
move(true);
}
span_list[0].onclick = function () {
move(false);
}
// （8）图片联动小圆点
// 思路：当前图片对应的小圆点会变成红色
// 图片和小圆点的对应关系
// 7张图片 5个小圆点
// 找到图片的下标 然后减一就是小圆点的下标
// 如何找到图片的下标 用ul的偏移量除以-600就可以得到
// （9）小圆点联动图片
// （10）自动轮播
// （11）鼠标移入悬停
// （12）定时器叠加
</script>
</body>
</html>
