请老师检查代码

来源：5-2 自由编程

听的说

2022-01-20 18:13:00

问题描述：

应该是这个效果了，老师帮忙检查一下

<!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>
<link rel="stylesheet" href="slider.css">
</head>

<body>
<style>
.prev,
.next {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background-color: orange;
top: 50%;
margin-top: -25px;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.slider-layout:hover .prev,
.slider-layout:hover .next {
opacity: 1;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
<div class="slider-layout">
<div class="prev">⬅️</div>
<div class="next">➡️</div>
<div class="slider">
<div class="slider-content">
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
</div>
</div>
</div>
</div>

<script src="base.js"></script>
<script>
class Slider extends BaseSlider {
constructor(el, option, position) {
super(el, option);
this._clickBtn(position);
}
_clickBtn(position) {
position[0].addEventListener('click', () => {
this.prev();
}, false);
position[1].addEventListener('click', () => {
this.next();
}, false);
}
}
new Slider(document.querySelector('.slider'), {
initialIndex: 1,
animation: true,
speed: 2000
}, [document.querySelector('.prev'), document.querySelector('.next')]);
</script>
</body>

</html>

</html>

写回答

1回答