6-4 呼吸轮播图
来源：6-4 编写呼吸轮播特效
慕移动4506339
2022-11-15 16:24:38
<!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: 0;
padding: 0;
}
#carosol {
margin: 40px auto;
width: 650px;
height: 360px;
border: 1px solid black;
position: relative;
/* overflow: hidden; */
}
div .btn {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(20, 20, 190, .4);
position: absolute;
top: 50%;
margin-top: -25px;
}
.btn#leftbtn {
left: 10px;
}
.btn#rightbtn {
right: 10px;
}
ul {
list-style: none;
}
li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease 0s;
}
li:first-child {
opacity: 1;
}
</style>
</head>
<body>
<div id="carosol">
<ul id="list">
<li><a href="javascript:;"><img src="images/0.jpg"> </a></li>
<li><a href="javascript:;"><img src="images/1.jpg"> </a></li>
<li><a href="javascript:;"><img src="images/2.jpg"> </a></li>
<li><a href="javascript:;"><img src="images/3.jpg"> </a></li>
<li><a href="javascript:;"><img src="images/4.jpg"> </a></li>
</ul>
<div id="leftbtn" class="btn"></div>
<div id="rightbtn" class="btn"></div>
</div>
<script>
var list = document.getElementById('list');
var box = document.getElementById('carosol');
var lis = document.getElementsByTagName('li');
var leftbtn = document.getElementById('leftbtn');
var rightbtn = document.getElementById('rightbtn');
var i = 0;
var lock = true;
rightbtn.onclick = function () {
if (!lock) return;
lock = false
lis[i].style.opacity = 0;
i++;
if (i > 4) {
i = 0;
}
lis[i].style.opacity = 1;
setTimeout(function () { lock = true }, 1000)
}
leftbtn.onclick = function () {
if (!lock) return;
lock = false
lis[i].style.opacity = 0;
i--;
if (i < 0) {
i = 4;
}
lis[i].style.opacity = 1;
setTimeout(function () { lock = true }, 1000)
}
</script>
</body>
</html>老师，麻烦看下是否还有其他问题
写回答
1回答
-
imooc_慕慕
2022-11-15
同学你好，代码效果实现正确没有问题，很棒，祝学习愉快~
0
相似问题