老师，这块移入显示和隐藏不知道哪里错了没作用，请帮看下谢谢
来源：5-2 自由编程
Cassiel751696
2021-11-25 12:45:16
<!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" id="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>
<a href="javascript:;" class="leftbtn" id="leftbtn"></a>
<a href="javascript:;" class="rightbtn" id="rightbtn"></a>
</div>
</div>
<script src="base.js"></script>
<script>
const slider=document.getElementById("slider")
const leftbtn=document.getElementById("leftbtn");
const rightbtn=document.getElementById("rightbtn");
// 继承父类的构造方法
class Slider extends BaseSlider{
constructor(el, options){
super(el, options) // 调用父类的构造方法
this._bingKey(); // 获取键盘方法
this._mouseBten(); // 获取左右按钮方法
}
// 设置私有方法
_bingKey(){
// 键盘按键事件监听
document.addEventListener("keyup",(ev)=>{
console.log(ev.keyCode); // 显示键码数
// 左键
if(ev.keyCode===37){
this.prev();
}else if(ev.keyCode==39){
this.next()
}
},false)
}
// 通过querySelect方法，获取左右按钮和大盒子元素
_mouseBten(){
// console.log(leftbtn)
// 点击左按钮
leftbtn.addEventListener("click",()=>{
//调用 切换上一张
this.prev();
},false)
// 点击右按钮
rightbtn.addEventListener("click",()=>{
// 调用 切换下一张
this.next();
},false)
}
}
new Slider(document.querySelector(".slider"),{
// 初始索引
initialIndex: 0,
// 切换时是否有动画
animation: true,
// 切换速度，单位 ms
speed: 2000
})
// 鼠标移入显示
slider.onmouseenter=function(){
leftbtn.style.display="block;"
rightbtn.style.display="block;"
console.log("移入")
}
// 鼠标移出隐藏
slider.onmouseleave=function(){
leftbtn.style.display="none;"
rightbtn.style.display="none;"
console.log("移除")
}
</script>
</body>
</html>
.slider {
overflow: hidden;
position: relative;
}
.slider .leftbtn, .slider .rightbtn{
width: 28px;
height: 40px;
background:rgba(255, 255, 255, 0.5) url(./imgs/icons.png) no-repeat;
/* border-radius: 50%; */
position: absolute;
top: 50%;
margin-top: -20px;
display: block;
}
.slider .leftbtn{
left: 0;
background-position: -21px -94px;
}
.slider .rightbtn{
right: 0;
background-position: -21px -29px;
}
1回答
-
好帮手慕小李
2021-11-25
同学你好，解决方案如下：
1、鼠标移入移出按钮没有效果的解决方案如下：
2、左右按钮老师看不到具体的图片，但同学写的左右按钮宽高css样式，与效果图不符。老师建议同学按照设计图来哦。
同学自己试试，祝学习愉快~
0
相似问题