How to select a specific start for an increment and reset it

83
April 16, 2018, at 07:21 AM

Ive been spending countless hours trying to figure it out.What I am trying to make is an animating slide show.I have 6 buttons underneath and lets say for ex i click on btn 4 the increment starts at 4 i++.And if i click on btn 1 it would restart/reset the loop and increment starts at 1 and i++.I hope its understandable.Dont worry about the img as much the main focus is the reset of the increment and the starting when clicked on.

                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

You basic problem is that every time you call resume() you set value to the selected button's value. You then increment this, but when you call resume() again it sets it back to what it was.

There are a lot of ways to fix this. The quickest (but maybe not the best) is to make value a variable outside the scope of resume() and set it with the click handler not resume(). Then when you increment it inside resume(), it will stick.

I would also suggest using setInterval() rather than calling setTimeout each time. It's easier to control and prevent more timers than intended from running.

For example:

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>

READ ALSO
jQuery $.ajax() find method

jQuery $.ajax() find method

I'm having difficulty passing the data returned from the server to the correct element in my code, although I can see the response in the developer tools and find seems to return the correct selectorThe example is from the book found here

63
I&#39;m having a double click issue activating jQuery function

I'm having a double click issue activating jQuery function

I've found similar answers that solve the double click issue when first calling a jQuery function, usually from having a click() function inside another click() or missing the $(document)ready

50
Reset CKEditor5 form

Reset CKEditor5 form

Sorry if this has been discussed before, but I have searched exhaustively and only found solutions to the older version, not 5I want to have two buttons for my forms, SEND and RESET

83
One button works, the other one doesn&#39;t

One button works, the other one doesn't

I have two input buttonsOne to set the MySQL database value to 0 the other to set it to 1

40