为什么这一行代码不写 点击后就直接跳第二张图呢，lf=0 不是应该跳第一张图吗
来源：6-3 编写跑马灯轮播图特效
weixin_慕村1291783
2020-11-04 15:59:25
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!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; } 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() { lf += 1; if (lf > 2) { setTimeout(function() { ul.style.left = 0; //为什么这一行代码不写 点击后就直接跳第二张图呢，lf=0 不是应该跳第一张图吗 lf = 0; }, 500) } ul.style.left = -600 * lf + 'px'; } </script></body>
</html>
1回答
-
同学你好，因为上传的代码都压缩到了一起，老师格式化之后，不太确定同学说的是不是“ ul.style.left = 0;”，如下图：
如果是，那么参考如下理解：
这是代码执行的问题，定时器是异步执行的。例如我们先点击了两次下一张按钮，此时lf =2。再点击第三次时，是切换到克隆的图片，代码中执行lf += 1，lf =3符合if判断条件，执行定时器。但因为定时器是异步的，所以没有立马执行lf = 0。而是先执行后面的ul.style.left = -600 * lf + 'px'。然后过500ms执行定时器中的代码，即lf = 0。上面说到了，是切换到了克隆的图片，定时器中并没有重新设置盒子的left值，所以不会自动跳转到第一张。
当再次点击时（第四次点击），又执行lf += 1，即lf=1，所以就会从克隆的图片直接跳转到第二张图片了（第二张图片索引为1）。
综上，在定时器中，添加ul.style.left = 0，会在第三次点击时，先切换到克隆的图片，然后过500ms，执行ul.style.left = 0，自动跳转到第一张图片哦。
如果不是这句代码，可以详细描述一下，以便老师准确的为你分析。
祝学习愉快~
0
相似问题