我花了无数小时试图弄清楚它。我试图制作的是动画幻灯片。我下面有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/