автоматизировать следующие/предыдущие кнопки в javascript

Question

Код для просмотра изображений, которые улетают. Но вам нужно нажать кнопки «next» или «prev», чтобы это произошло. Я хотел бы, чтобы это происходило автоматически с таймером, который останавливается на каждом изображении в течение примерно 5 секунд, а затем переходит к следующему изображению, а затем снова начинается без перемотки. (Я могу дель с функцией перемотки на данный момент, но в конечном счете, хотел бы он быть непрерывным, которые в основном означает, что каждое изображение будет иметь улетать возвращение к задней части стека.

<div id="view"> 
     <ul id="stack"> 

      <li><img src="labels/manzonipinotnoir.png" /></li> 
      <li><img src="labels/figgepinotnoir.png" /></li> 
      <li><img src="labels/marinusbernardusredwine.png" /></li> 
      <li><img src="labels/riverbench.png" /></li> 


     </ul> 
    </div> 
<div class="controls"> 
     <button class="prev" disabled="disabled">Prev</button>  
     <button class="next" >Next</button> 
     <a> Featured Wineries</a> 
    </div> 




    <script> 
    (function($) { 

     var y_space = 50, 
      z_space = 50; 

     var view = $('#view'), 
      lis = $('#stack li'), 
      prev = $('.controls .prev'), 
      next = $('.controls .next'), 
      left = $('#rotate_controls .left'), 
      centre = $('#rotate_controls .centre'), 
      right = $('#rotate_controls .right'); 

     var z_index = lis.length, 
      current_index = 1, 
      translate_y = y_space *-1, 
      translate_z = z_space *-1; 

     lis.each(function() { 

      this.style['-webkit-transform'] = 'translate3d(0px, ' + translate_y + 'px, ' + translate_z + 'px)'; 
      this.style['-moz-transform'] = 'translate3d(0px, ' + translate_y + 'px, ' + translate_z + 'px)'; 
      this.style['z-index'] = z_index; 

      $(this).data('translate_y', translate_y); 
      $(this).data('translate_z', translate_z); 

      z_index--; 
      translate_y -= y_space; 
      translate_z -= z_space; 

     }); 

     next.bind('click', function() { 
      if($(this).attr('disabled')) return false; 
      lis.each(function() { 
       animate_stack(this, y_space, z_space); 
      }); 
      lis.filter(':nth-child(' + current_index + ')').css('opacity', 0); 
      current_index ++; 
      check_buttons(); 
     }); 

     prev.bind('click', function() { 
      if($(this).attr('disabled')) return false; 
      lis.each(function() { 
       animate_stack(this, -y_space, -z_space);  
      }); 
      lis.filter(':nth-child(' + (current_index - 1) + ')').css('opacity', 1); 
      current_index --; 
      check_buttons();  
     }); 

     $(document).bind('mousewheel', function(event, delta, deltaX, deltaY) { 
      if(deltaY >= 0) { 
       next.trigger('click'); 
      } 
      else { 
       prev.trigger('click'); 
      } 
     }); 

     function check_buttons() { 
      if(current_index==1) { 
       prev.attr('disabled', true); 
      } 
      else { 
       prev.attr('disabled', false); 
      } 

      if(current_index == lis.length) { 
       next.attr('disabled', true);     
      } 
      else { 
       next.attr('disabled', false); 
      } 
     } 





     function animate_stack(obj, y, z) { 

      var new_y = $(obj).data('translate_y') + y; 
      var new_z = $(obj).data('translate_z') + z; 

      obj.style['-webkit-transform'] = 'translate3d(0px, ' + new_y + 'px, ' + new_z + 'px)'; 
      obj.style['-moz-transform'] = 'translate3d(0px, ' + new_y + 'px, ' + new_z + 'px)'; 
      $(obj).data('translate_y', new_y) 
      .data('translate_z', new_z); 

     } 


    })(jQuery); 
    </script> 

Answer 1

Не можете использовать метод setInterval:

function timer() 
{ 
    setInterval(function(){nextImg()},5000); 
} 

function nextImg() 
{ 
// whatever code you have written for next.bind 
}