我花了无数个小时试图弄清楚它。我想做的是一个动画幻灯片放映。我下面有 6 个按钮,假设我点击 btn 4,增量从 4 i++ 开始。如果我点击 btn 1 它将重新启动/重置循环,增量从 1 和 i++ 开始。我希望它可以理解。不要担心 img,因为主要焦点是增量的重置和单击时的开始。
js
var imgArray =
["img1","img2","img3","img4","img5","img6"],
imgDuration = 2000;index=0;i=0;
$("input").on("click",function(){
resume()
})
function resume(){
var value = $("input:checked").val();
value++;
console.log(value)
if (value == imgArray.length) {
value =0
}time = setTimeout(resume,imgDuration);
}
html
<div class="radio-case">
<form class="radio-btn">
<input name="imgbtn" checked="true" value="0" type="radio">
<input name="imgbtn" value="1" type="radio">
<input name="imgbtn" value="2" type="radio">
<input name="imgbtn" value="3" type="radio">
<input name="imgbtn" value="4" type="radio">
<input name="imgbtn" value="5" type="radio">
</form>
</div>
最佳答案
您的基本问题是,每次调用 resume()
时,您都会将 value
设置为所选按钮的值。然后你增加这个值,但是当你再次调用 resume()
时,它会将它设置回原来的状态。
有很多方法可以解决这个问题。最快(但可能不是最好)的方法是使 value
成为 resume()
范围之外的变量,并使用点击处理程序而不是 resume() 设置它
。然后,当您在 resume()
内递增它时,它就会粘住。
我还建议使用 setInterval()
而不是每次都调用 setTimeout
。更容易控制和防止运行超出预期的计时器。
例如:
var imgArray = ["img1", "img2", "img3", "img4", "img5", "img6"]
var imgDuration = 2000
var value = 0
var interval
$("input").on("click", function() {
clearInterval(interval)
value = $("input:checked").val();
interval = setInterval(resume, imgDuration)
})
function resume() {
console.log(imgArray[value % imgArray.length]);
value++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-case">
<form class="radio-btn">
<input name="imgbtn" checked="true" value="0" type="radio">
<input name="imgbtn" value="1" type="radio">
<input name="imgbtn" value="2" type="radio">
<input name="imgbtn" value="3" type="radio">
<input name="imgbtn" value="4" type="radio">
<input name="imgbtn" value="5" type="radio">
</form>
</div>
关于javascript - 如何选择增量的特定开始并重置它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49847581/