请老师看下问题
来源：6-3 编写跑马灯轮播图特效
weixin_慕移动6442865
2020-11-07 20:41:40
麻烦老师看下，当我连续快速左右切换，每次到1号的时候就会出现瞬间的白块，不知道什么BUG。
<!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;}
#box{
width: 500px;
height: 100px;
border:5px solid black;
margin:100px auto;
position: relative;
overflow: hidden;
}
ul{
width: 3000px;
position: relative;
transition: left 0.5s ease 0s;
left:0;
}
li{
width: 500px;
height: 100px;
list-style: none;
float: left;
background-color: chartreuse;
font-size: 25px;
}
#left,#right{
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
font-size: 50px;
text-align: center;
line-height: 100px;
top:0;
margin-top:104px;
}
#left{
left:600px;
}
#right{
right:600px;
}
</style>
</head>
<body>
<div id='box'>
<ul id='ul'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id='left'>←</div>
<div id='right'>→</div>
</body>
<script>
var box=document.getElementById('box');
var ul=document.getElementById('ul');
var left=document.getElementById('left');
var right=document.getElementById('right');
var num=0;
var kelong=ul.firstElementChild.cloneNode(true)
ul.appendChild(kelong)
left.onclick=function(){
num++
if(num>4){
setTimeout(function(){
ul.style.left=0
num=0;
ul.style.transition='none'
},500)
}
ul.style.transition='left 0.5s ease 0s'
ul.style.left=-num*500+'px'
}
right.onclick=function(){
if(num<1){
ul.style.transition='none'
ul.style.left=-5*500+'px'
setTimeout(function(){
ul.style.transition='left 0.5s ease 0s'
num=4;
ul.style.left=-num*500+'px'
},0)
}else{
num--
ul.style.left=-num*500+'px'
}
}
</script>
</html>
3回答
-
同学你好，能够自己找到问题在哪里，并且还能改正，非常棒！要继续加油呀！
祝学习愉快！
0 -
weixin_慕移动6442865
提问者
2020-11-07
没看完课，原来有解决方法
0 -
weixin_慕移动6442865
提问者
2020-11-07
老师你好，发现此问题是因为设置的延时器500MS，如果到图5个时候马上点击而不是让它自己切换会出现移动2次瞬间图1的BUG，该如何解决？
0
相似问题
回答 2
回答 3