请老师检查谢谢~
来源：5-2 自由编程
Dreamboat丶C
2022-04-05 10:56:01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class 的应用</title>
<link rel="stylesheet" href="./slider.css" />
</head>
<body>
<div class="slider-layout">
<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 class="leftbtn" id="leftbtn"></div>
<div class="rightbtn" id="rightbtn"></div>
</div>
</div>
<script src="./base.js"></script>
<script>
// console.log(BaseSlider);
const leftbtn = document.getElementById('leftbtn')
const rightbtn = document.getElementById('rightbtn')
const slider = document.querySelector('.slider')
class Btn extends BaseSlider {
constructor(el, options) {
super(el, options)
this._leftEvent()
this._rightEvent()
}
_leftEvent() {
leftbtn.addEventListener('click', () => {
this.prev()
})
}
_rightEvent() {
rightbtn.addEventListener('click', () => {
this.next()
})
}
}
new Btn(slider, {
initialIndex: 2,
animation: true,
speed: 2000
});
</script>
</body>
</html>
相关代码：
/* css reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
outline: none;
}
img {
vertical-align: top;
}
/* layout */
.slider-layout {
width: 80%;
height: 420px;
margin: 0 auto;
}
/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
width: 100%;
height: 100%;
}
.slider {
overflow: hidden;
}
.slider-item {
float: left;
}
.slider-animation {
transition-property: transform;
transition-duration: 0ms;
}
.slider {
position: relative;
}
.leftbtn,
.rightbtn {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(219, 218, 212, 0.4);
position: absolute;
top:50%;
margin-top:-25px;
cursor: pointer;
z-index: 9999;
}
.leftbtn {
left: 20px;
}
.rightbtn {
right: 20px;
}1回答
-
樱桃小胖子
2022-04-06
同学你好，代码效果实现的是可以的，祝学习愉快！
0
相似问题