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>

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

1 个答案: