老师，请问我的代码哪里错了，没有呼吸效果
来源：6-4 编写呼吸轮播特效
慕仙1405838
2021-05-08 12:21:34
<!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>通过改变透明度做出呼吸灯特效</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.carousel {
width: 650px;
height: 360px;
margin: 100px auto;
border: 2px solid black;
position: relative;
}
.carousel ul {
list-style: none;
}
.carousel ul li {
transition: opacity 5s easy 0s;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.carousel ul li:first-child {
opacity: 1;
}
.btn {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: orange;
position: absolute;
top: 50%;
margin-top: -25px;
}
.leftbtn {
left: 20px;
}
.rightbtn {
right: 20px;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul id="list">
<li><img src="image/beijing/0.jpg" alt=""></li>
<li><img src="image/beijing/1.jpg" alt=""></li>
<li><img src="image/beijing/2.jpg" alt=""></li>
<li><img src="image/beijing/3.jpg" alt=""></li>
<li><img src="image/beijing/4.jpg" alt=""></li>
</ul>
<a href="javascript:;" class="rightbtn btn" id="rightbtn"></a>
<a href="javascript:;" class="leftbtn btn" id="leftbtn"></a>
</div>
<script>
var list = document.getElementById('list');
var rightbtn = document.getElementById('rightbtn');
var leftbtn = document.getElementById('leftbtn');
var lis = list.getElementsByTagName('li');
//节流函数
var lock = true;
//标识量，表示当前处于第几张图片
var idx = 0;
//左按钮
rightbtn.onclick = function () {
//判断节流锁开关状态，关就不执行
if (!lock) return;
//点击前的图片开始透明,老图要淡出
lis[idx].style.opacity = 0;
idx++;
if (idx > 4) idx = 0;
lis[idx].style.opacity = 1;
//关锁
lock = false;
setTimeout(function () {
lock = true;
}, 5000)
}
leftbtn.onclick=function(){
if(!lock) return;
lis[idx].style.opacity=0;
idx--;
if(idx<0) idx=4;
lis[idx].style.opacity=1;
lock=false;
setTimeout(function(){
lock=true;
},5000)
}
</script>
</body>
</html>
1回答
-
好帮手慕然然
2021-05-08
同学你好，呼吸效果不出现是因为css代码中给opacity属性设置过渡时，过渡效果的速度曲线函数值拼写有误，正确拼写为ease，参考如下：
另外，建议将开锁的定时器等待时间设为1s，提高用户体验，参考如下
祝学习愉快！
0
相似问题