老师看下左按钮的代码，为什么用延时器拉到最后一张图后不进行换图了 要再点一次才会换图
来源：6-3 编写跑马灯轮播图特效
weixin_慕村1291783
2020-11-04 16:53:34
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 3000px; position: relative; top: 0; left: 0; transition: all .5s ease 0s; } #box { position: relative; width: 600px; height: 300px; border: 1px solid #ccc; margin: 50px auto; /* overflow: hidden; */ } img { width: 600px; height: 300px; } li { float: left; } #left-btn { position: absolute; top: 50%; left: 20px; margin-top: -25px; width: 50px; height: 50px; background-color: rgba(206, 62, 62, 0.5); border-radius: 50%; } #right-btn { position: absolute; top: 50%; right: 20px; margin-top: -25px; width: 50px; height: 50px; background-color: rgba(206, 62, 62, 0.5); border-radius: 50%; } </style></head>
<body> <div id="box"> <ul id="ul"> <li><img src="images/banner01.png" alt=""></li> <li><img src="images/banner02.png" alt=""></li> <li><img src="images/banner03.png" alt=""></li> </ul> <a href="javascript:;" id="left-btn"></a> <a href="javascript:;" id="right-btn"></a> </div> <script> var ul = document.getElementById('ul'); var leftBtn = document.getElementById('left-btn'); var rightBtn = document.getElementById('right-btn'); var lf = 0; var xin = ul.firstElementChild.cloneNode(true); ul.appendChild(xin); rightBtn.onclick = function() { ul.style.transition = 'all .5s ease 0s'; lf += 1; if (lf > 2) { setTimeout(function() { ul.style.transition = 'none'; ul.style.left = 0; //为什么这一行代码不写 点击后就直接跳第二张图呢，lf=0 不是应该跳第一张图吗 lf = 0; }, 500) } ul.style.left = -600 * lf + 'px'; } leftBtn.onclick = function() { if (lf == 0) { setTimeout(function() { ul.style.transition = 'none'; ul.style.left = '-1800px'; lf = 3; }, 0) } ul.style.transition = 'all .5s ease 0s'; lf--;
ul.style.left = -600 * lf + 'px'; } </script></body>
</html>
1回答
-
同学你好，问题解答如下：
1. 注释中的问题解答：
由于setTimeout是定时器，它是异步执行的，即下图黄框中的代码会在“ul.style.left = -600 * lf + 'px';”这句代码执行之后再执行：
如果去掉“ul.style.left = 0”这句代码，当lf=3时，会先设置ul的left为-1800px（显示最后一张），然后500ms后，再去掉ul的过渡样式，并把lf置为0，此时ul的left没有设置为0（还是显示最后一张）；再次点击按钮后，会执行lf+=1，即lf=1，接下来会执行ul.style.left = -600 * lf + 'px';，所以直接就显示第二张了。
2. 左按钮同理，定时器中的代码，会后执行：
即，点击一次左按钮后，ul最终的样式还是left=-1800px，因此没有更换图片。
可做如下更改：
祝学习愉快！0
相似问题