javascript - 如何选择增量的特定开始并重置它

Question

我花了无数个小时试图弄清楚它。我想做的是一个动画幻灯片放映。我下面有 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>

Answer 1

您的基本问题是，每次调用 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>