作业

来源：5-2 自由编程

卷毛奋斗中

2022-08-05 10:43:46

//css

/* 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-layout {
position: relative;
}

.slider-layout p {
display: block;
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 20px;
color: rgb(220, 33, 33);
text-align: center;
background-color: rgba(255, 255, 255, .5);
cursor: pointer;
user-select: none;
}

.slider-layout p.left {
left: 0;
}

.slider-layout p.right {
right: 0;
}

//slider

<!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>
<p class="left">&lt;</p>
<p class="right">&gt;</p>
</div>

<script src="./base.js"></script>
<script>
// console.log(BaseSlider);

class Slider extends BaseSlider {
constructor(el, options) {
super(el, options);

this._bindEvent();
}

_bindEvent() {
document.addEventListener('keyup', ev => {
// console.log(ev.keyCode);
if (ev.keyCode === 37) {
// ←
this.prev();
} else if (ev.keyCode === 39) {
// →
this.next();
}
});
}
}
new Slider(document.querySelector('.slider'), {
initialIndex: 1,
animation: true,
speed: 1000
});

//继承基类
class Btn extends BaseSlider {
constructor(el, options) {
super(el, options);
//获取元素
this.leftBtn = document.querySelector('p.left');
this.rightBtn = document.querySelector('p.right');
this.slider = document.querySelector('slider-layout');
//调用方法
this._bindEvent();
this._move();
}

//切换图片
_bindEvent() {
this.leftBtn.onclick = () => {
this.prev();
}
this.rightBtn.onclick = () => {
this.next();
}
}
//移入移出事件
_move() {
this.slider.onmouseenter = () => {
this.leftBtn.style.display = 'block';
this.rightBtn.style.display = 'block';
}
this.slider.onmouseleave = () => {
this.leftBtn.style.display = 'none';
this.rightBtn.style.display = 'none';
}
}
}

//实例化按钮类
new Btn(document.querySelector('.slider'), {
initialIndex: 1,
animation: true,
speed: 2000
})
</script>
</body>

</html>

写回答

1回答