老师帮忙看下。功能是实现了，但是老师的base.js代码看不太明白这可咋整
来源：5-2 自由编程
L_Tomato
2021-11-26 15:49:38
<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="btn"> <button class='leftbtn'> < </button> <button class='rightbtn'> > </button> </div> </div> </div>
<script src="./base.js"></script> <script> // console.log(BaseSlider); const leftbtn = document.querySelector('.leftbtn'); const rightbtn = document.querySelector('.rightbtn'); const slider = document.querySelector('.slider'); class Slider extends BaseSlider { constructor(el, options) { super(el, options);
this._bindEvent(); } _bindEvent() { leftbtn.addEventListener('click', ev => { this.prev(); }) rightbtn.addEventListener('click', ev => { this.next(); }) // 键盘左右键切换功能 // document.addEventListener('click', 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: 2000 });
slider.addEventListener('mouseover', () => { leftbtn.style.display = 'block'; rightbtn.style.display = 'block'; }, false); slider.addEventListener('mouseleave', () => { leftbtn.style.display = ''; rightbtn.style.display = ''; }, false);
</script></body>
</html>
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;
position: relative;
}
.slider-item {
float: left;
}
.slider-animation {
transition-property: transform;
transition-duration: 0ms;
}
button{
width: 50px;
height: 50px;
background-color:white;
opacity: 0.5;
border-radius: 50%;
border: none;
font-size: 20px;
}
.leftbtn{
position: absolute;
left: 10px;
top: 50%;
margin-top: -25px;
display: none;
}
.rightbtn{
position: absolute;
right: 10px;
top: 50%;
margin-top: -25px;
display: none;
}
1回答
-
好帮手慕星星
2021-11-26
同学你好，代码实现效果很棒！
针对提问回复：
同学将老师讲解的逻辑理解了即可，主要是通过属性和方法来控制图片移动。base.js文件代码有注释，可以下载源码来看
实际发开中一般用第三方插件，除非有特殊要求会自己封装，会使用即可。
祝学习愉快~
0
相似问题