我想写个抽奖的js脚本,12张图做轮播图,js的定时器向左滚动,每张图宽高为200,左偏-2400px的时候设置为0,然后重新向左移动,但是我定时器到-2400px就自己停住了.
有没有大佬可以解惑啊
[HTML] 纯文本查看 复制代码 <!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>
[JavaScript] 纯文本查看 复制代码 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")[0]
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[rdm]
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)
}
}
}; | 
发表于 2022-1-4 23:20
|
发表于 2022-1-5 21:29
