js 定时器为啥自己停住了
我想写个抽奖的js脚本,12张图做轮播图,js的定时器向左滚动,每张图宽高为200,左偏-2400px的时候设置为0,然后重新向左移动,但是我定时器到-2400px就自己停住了.有没有大佬可以解惑啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" >
<!-- <script src="../bootstrap_js/bootstrap.js"></script>-->
<script src="./xyz.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 3000px;
height: 200px;
left: 0;
position: absolute;
/*animation: rollover 9s linear infinite;*/
}
ul li{
list-style: none;
}
ul li img{
width: 200px;
height: 200px;
float: left;
}
.show{
width: 600px;
height: 200px;
overflow: hidden;
position: relative;
}
/*@keyframes rollover {*/
/* from{left: 0}*/
/* to{left: -2400px}*/
/*}*/
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-7 col-md-offset-3">
<div class="show">
<ul class="pic_lists">
<li><img src="./img/1.jpeg" alt="" class="img-rounded"></li>
<li><img src="./img/2.jpeg" alt="" class="img-circle"></li>
<li><img src="./img/3.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/4.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/5.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/6.jpg" alt="" class="img-thumbnail"></li>
<li><img src="./img/7.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/8.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/9.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/10.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/11.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/12.jpeg" alt="" class="img-thumbnail"></li>
<li><img src="./img/1.jpeg" alt="" class="img-rounded"></li>
<li><img src="./img/2.jpeg" alt="" class="img-circle"></li>
<li><img src="./img/3.jpeg" alt="" class="img-thumbnail"></li>
</ul>
</div>
</div>
<div class="col-md-7 col-md-offset-3">
<div class="btn btn-success" id = "clk">点我</div>
</div>
</div>
</div>
</body>
</html>
window.onload = function () {
var st_btn = document.getElementById("clk")
function move(obj) {
current_left = obj.offsetLeft
if (current_left === -2400) {
current_left = 0
}
change_left = current_left - 200 + "px"
obj.style.left = change_left
}
var rdm
var children_num
var timer
var is_flag = true
if (is_flag) {
st_btn.onclick = function () {
var uls = document.getElementsByClassName("pic_lists")
is_flag = false
children_num = uls.children
rdm = Math.round(Math.random() * (children_num.length - 3))
//choose_obj 随机数choose_obj_left 随机数决定的图片向左偏移位置 current_left 当前偏移
choose_obj = children_num
choose_obj_left = rdm * -200
total_left = -7200 + choose_obj_left
clearInterval(timer)
timer = setInterval(function () {
current_left = uls.offsetLeft
//这里有问题求助啊 这里有问题求助啊 这里有问题求助啊 这里有问题求助啊
if (current_left == -2400) {
current_left == 0
} else if (current_left > total_left) {
current_left -= 20;
uls.style.left = `${current_left}px`
}
}, 20)
}
}
}; offsetLeft不能赋值
变为0要像下面那个uls.style.left = 0那样写 current_left = uls.offsetLeft
//这里有问题求助啊 这里有问题求助啊 这里有问题求助啊 这里有问题求助啊
if (current_left == -2400) {
current_left == 0
两个问题
一是你这里用的current_left == 0; 这不是赋值 是比较 current_left的值不会改变
二是 current_left是来自开头的一句current_left = uls.offsetLeft；所以你在后面怎么改 开头都会被uls.offsetLeft值覆盖掉；
好了 解决方法就是 把current_left == 0; 换成 uls.style.left = 0;
学到了哦:victory: 36行多打个等号 current_left == 0错了，这是判断不是赋值，他当然不执行 smldhz 发表于 2022-1-5 00:23
current_left = uls.offsetLeft
//这里有问题求助啊 这里 ...
非常感谢,学习到了
current_left = uls.offsetLeft
if (current_left == -2400) {
current_left == 0
}
两个问题
1.是current_left == 0; 是判断,不是赋值,current_left的值还是uls.offsetLeft
2.没有把预期的current_left(即0)赋值给utls.offsetLeft
页:
[1]