为什么点击按钮会乱跳啊
来源：6-3 编写跑马灯轮播图特效
情分的小前端
2021-10-05 11:32:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 650px;
height: 360px;
border: 1px solid black;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box a {
position: absolute;
top: 0;
width: 50px;
height: 50px;
top: 50%;
margin-top: -25px;
border-radius: 50%;
background-color: gray;
}
.box #lef {
left: 0;
}
.box #rit {
right: 0;
}
.box #list {
width: 5000px;
position: relative;
left: 0;
list-style: none;
/* transition: left 2s linear 0s; */
}
.box #list li {
float: left;
}
</style>
</head>
<body>
<div class="box">
<ul id="list">
<li><img src="img/beijing/0.jpg" alt="" srcset=""></li>
<li><img src="img/beijing/1.jpg" alt="" srcset=""></li>
<li><img src="img/beijing/2.jpg" alt="" srcset=""></li>
<li><img src="img/beijing/3.jpg" alt="" srcset=""></li>
<li><img src="img/beijing/4.jpg" alt="" srcset=""></li>
</ul>
<a href="javascript:;" id="lef"></a>
<a href="javascript:;" id="rit"></a>
</div>
<script>
var list = document.getElementById('list');
var lef = document.getElementById('lef');
var rit = document.getElementById('rit');
var rp = 0;
var rpt = 0;
var lock = true;
var timer;
var cloneli = list.firstElementChild.cloneNode(true);
list.appendChild(cloneli);
rit.onclick = function() {
if (!lock) return;
list.style.transition = "left .5s linear 0s";
rp++;
if (rp > 4) {
setTimeout(function() {
rp = 0;
list.style.transition = "none";
list.style.left = rp * -650 + 'px';
}, 500)
}
list.style.left = rp * -650 + 'px';
lock = false;
setTimeout(function() {
lock = true;
}, 500)
// console.log(rp);
}
lef.onclick = function() {
if (!lock) return;
list.style.transition = "left .5s linear 0s";
if (rp == 0) {
list.style.left = 5 * -650 + 'px';
list.style.transition = "none";
setTimeout(function() {
rp = 4;
list.style.transition = "left .5s linear 0s";
list.style.left = rp * -650 + 'px';
}, 0)
} else {
rp--;
list.style.left = rp * -650 + 'px';
}
lock = false;
setTimeout(function() {
lock = true;
}, 500);
}
clearInterval(timer);
timer = setInterval(function() {
rpt -= 650;
list.style.transition = "left .5s linear 0s";
list.style.left = rpt + 'px';
if (rpt == (-3250)) {
setTimeout(function() {
rpt = 0;
list.style.transition = "none";
list.style.left = rpt * -650 + 'px';
}, 500)
}
}, 2000);
</script>
</body>
</html>
1回答
-
好帮手慕然然
2021-10-06
同学你好，因为自动轮播效果与按钮点击轮播效果之间冲突了：当点击按钮轮播时，自动轮播也在进行，且使用的不是一套代码，两者之间会发生冲突。
建议：自动轮播实际上就是自动向右轮播，与点击右按钮轮播的效果一样，所以实现自动轮播可以模拟自动点击右按钮，代码如下
祝学习愉快！
0
相似问题