老师，请问为什么左按钮按到第四张之后就不能循环了？
来源：6-4 编写呼吸轮播特效
慕神3111110
2021-07-03 13:30:14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 171px;
height: 171px;
margin: 30px auto;
position: relative;
}
ul {
border: 1px solid #000;
list-style: none;
position: relative;
}
li {
position: absolute;
left: 0px;
top: 0px;
transition:opacity 1s linear 0s;
opacity: 0;
}
.li{
opacity: 1;
}
a {
display: block;
width: 30px;
height: 30px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 50%;
margin-top: -25px;
text-align: center;
}
.btnl {
left: 0;
}
.btnr {
right: 0;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li class="li"><img src="/image/product01.png" alt="" id="pic1"></li>
<li><img src="/image/product02.png" alt=""></li>
<li><img src="/image/product03.png" alt=""></li>
<li><img src="/image/product04.png" alt=""></li>
<li><img src="/image/product05.png" alt="" id="pic5"></li>
</ul>
<a href="javascript:;" class="btnl" id="btnl"><</a>
<a href="javascript:;" class="btnr" id="btnr">></a>
</div>
<script>
var box = document.getElementById("box")
var list = document.getElementById("list")
var li = document.getElementsByTagName("li")
var btnl = document.getElementById("btnl")
var btnr = document.getElementById("btnr")
var i=0;
var lock=true;
btnl.onclick=function(){
if (!lock)return;
lock=false;
if(i==4)i=0;
li[i].style.opacity=0
i++
li[i].style.opacity=1
setTimeout(function() {
lock=true;
}, 1000);
}
btnr.onclick=function(){
if (!lock)return;
lock=false;
if(i==0)i=4;
li[i].style.opacity=0
i--
li[i].style.opacity=1
setTimeout(function() {
lock=true;
}, 1000);
}
</script>
</body>
</html>
1回答
-
同学你好，代码逻辑如下：
默认第一张显示，也就是i值为0的时候，然后第一次点击左侧按钮，0隐藏，1显示；第二次点击左侧按钮，1隐藏，2显示；第三次点击左侧按钮，2隐藏，3显示；第四次点击左侧按钮，3隐藏，4显示；第五次点击左侧按钮，i值为4，但是改变了i值为0，设置0设置隐藏，1显示。这时候i值为4的时候并没有隐藏，所以一直显示最后一张。虽然其他图片也在切换，但是覆盖住了。建议修改为：
在i值增加后再做判断，将i改为0 。
右侧按钮也是同样的道理
自己再测试下，祝学习愉快！
0
相似问题