请老师检查
来源：5-2 自由编程
你怎么睡得着的
2022-03-26 14:56:28
<!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="leftbtn"></div>
<div class="rightbtn"></div>
<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>
// console.log(BaseSlider);
const left_btn= document.querySelector('.leftbtn');
const right_btn= document.querySelector('.rightbtn');
const slider= document.querySelector('.slider');
// 子类
class Btn extends BaseSlider {
constructor(el, options) {
super(el, options);
this._leftEvent();
this._rightEvent();
}
_leftEvent() {
left_btn.addEventListener('click', () => {
// alert('1');
this.prev();
})
}
_rightEvent() {
right_btn.addEventListener('click', () => {
this.next();
})
}
}
new Btn(slider, {
initialIndex: 1,
animation: true,
speed: 2000
})
slider.onmouseenter = function () {
left_btn.style.display = 'block';
right_btn.style.display = 'block';
}
slider.onmouseleave = function () {
left_btn.style.display = 'none';
right_btn.style.display = 'none';
}
</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{
position: relative;
}
.slider .leftbtn, .slider .rightbtn{
width: 50px;
height: 50px;
background-color: rgba(219, 218, 212, 0.4);
position: absolute;
top: 50%;
margin-top: -25px;
right: 20px;
z-index: 9999;
/* display: none; */
}
.slider .rightbtn{
left:20px;
}
.slider-item {
float: left;
}
.slider-animation {
transition-property: transform;
transition-duration: 0ms;
}问题描述：
老师，我的按钮怎么左右反过来了
2回答
-
好帮手慕星星
2022-03-26
同学你好，代码是可以的。css中的类换为左侧按钮即可
祝学习愉快！
0 -
你怎么睡得着的
提问者
2022-03-26
老师，我知道啦！css写反了
0
