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

10-09 05:41
查看更多