老师,对代码执行流程有点疑惑
1 | <!DOCTYPE html><br><html lang="en"><br><br><head><br> <meta charset="UTF-8"><br> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> * {<br> margin: 0;<br> padding: 0;<br> list-style: none;<br> vertical-align: middle;<br> }<br><br> #box {<br> width: 650px;<br> height: 360px;<br> border: 1px solid #000;<br> margin: 10px auto;<br> position: relative;<br> /* overflow: hidden; */<br> }<br><br> #box a {<br> width: 50px;<br> height: 50px;<br> position: absolute;<br> background-color: aquamarine;<br> border-radius: 50%;<br> top: 50%;<br> margin-top: -25px;<br> }<br><br> #box a#lbtn {<br> left: 10px;<br> }<br><br> #box a#rbtn {<br> right: 10px;<br> }<br><br> #box #list {<br> width: 5000px;<br> left: 0;<br> position: absolute;<br> }<br><br> #box #list li {<br> float: left;<br> }<br> </style><br></head><br><br><body><br> <div id="box"><br> <ul id="list"><br> <li><img src="images/beijing/0.jpg" alt=""></li><br> <li><img src="images/beijing/1.jpg" alt=""></li><br> <li><img src="images/beijing/2.jpg" alt=""></li><br> <li><img src="images/beijing/3.jpg" alt=""></li><br> <li><img src="images/beijing/4.jpg" alt=""></li><br> <li><img src="images/beijing/0.jpg" alt=""></li><br> </ul><br> <a href="Javascript:;" id="lbtn"></a><br> <a href="Javascript:;" id="rbtn"></a><br> <script><br> var oBox = document.getElementById('box');<br> var oLbtn = document.getElementById('lbtn');<br> var oRbtn = document.getElementById('rbtn');<br> var oList = document.getElementById('list');<br> var num = 0;<br> var lock = true;<br> var move;<br> oList.style.transition = 'left .5s ease 0s';<br><br> function timer() {<br><br> move = setInterval(function () {<br> num++<br> if (num == 6) {<br> num = 0;<br> oList.style.transition = 'none';<br> setTimeout(function () {<br> num++<br> oList.style.left = -num * 650 + 'px';<br> oList.style.transition = 'left .5s ease 0s';<br> }, 0)<br> }<br> oList.style.left = -num * 650 + 'px'<br> }, 1500);<br> }<br><br> timer()<br><br> oBox.onmouseenter = function () {<br> clearInterval(move)<br> }<br><br> oBox.onmouseleave = function () {<br> timer()<br> }<br><br> oLbtn.onclick = function () {<br> if (lock != true) return;<br> lock = false;<br> if (num == 0) {<br> num = 5<br> oList.style.transition = 'none';<br> setTimeout(function () {<br> num--<br> oList.style.left = -num * 650 + 'px';<br> oList.style.transition = 'left .5s ease 0s';<br> }, 0)<br> } else {<br> num--<br> }<br> oList.style.left = -num * 650 + 'px';<br> setTimeout(function () {<br> lock = true;<br> }, 500)<br> }<br><br> oRbtn.onclick = function () {<br> if (lock != true) return;<br> lock = false;<br> num++<br> if (num == 6) {<br> num = 0;<br> oList.style.transition = 'left .5s ease 0s';<br> oList.style.left = -num * 650 + 'px';<br><br> // setTimeout(function () {<br> num++<br> oList.style.left = -num * 650 + 'px';<br> oList.style.transition = 'left .5s ease 0s';<br> // }, 0)<br> }<br> oList.style.left = -num * 650 + 'px';<br> // oList.style.transition = 'left .5s ease 0s';<br> // oList.style.left = -num * 650 + 'px';<br> // if (num == 5) {<br> // setTimeout(function () {<br> // num = 0<br> // oList.style.left = -num * 650 + 'px';<br> // oList.style.transition = 'none'<br> // }, 500)<br> // }<br> setTimeout(function () {<br> lock = true;<br> }, 500)<br> }<br> </script><br> </div><br></body><br><br></html><br> |
相关截图：
问题描述：
图中右按钮代码,如果在没用延时器的情况下,
为什么在最后一张图片继续点右按钮后
不是先从最后一张咕噜回第一张图,然后再过渡到第二张图
而是直接从最后一张咕噜到第二张图呢?
12
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧