请老师检查一下代码，谢谢
来源：1-1 课程简介
闪电打雷躲树下
2022-08-15 18:01:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.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="left"><</div>
<div class="right">></div>
</div>
</div>
<script src="./index.js"></script>
<script>
var slider=document.querySelector('.slider')
var left= document.querySelector('.left')
var right=document.querySelector('.right')
class son extends BaseSlider{
constructor(el,options){
super(el,options)
this.toggle();
this.hidden();
this.keycontrol()
}
toggle(){
left.addEventListener('click',()=>{
this.prev()
})
right.addEventListener('click',()=>{
this.next()
})
}
hidden(){
slider.addEventListener('mousemove',function(){
left.style.display='block'
right.style.display='block'
})
slider.addEventListener('mouseout',function(){
left.style.display='none'
right.style.display='none'
})
}
keycontrol(){
document.addEventListener('keydown',(e)=>{
if(e.keyCode==37){
this.prev()
}else if(e.keyCode==39){
this.next()
}
})
}
}
new son(slider,{
initialIndex: 0,
// 切换时是否有动画
animation: true,
// 切换速度，单位 ms
speed: 2000
})
</script>
</body>
</html>写回答
1回答
-
好帮手慕慕子
2022-08-15
同学你好，代码效果实现是可以的，继续加油，祝学习愉快~
0
