兩種方式在一個循環

Question

結合我偶然發現在其中創建一個循環涉及4 div的http://jsfiddle.net/w5YHY/2/

var $elements = $('#One, #Two, #Three, #Four'); 
    $elements.eq(i).fadeIn(1000, function() { 
     var $self = $(this); 
     setTimeout(function() { 
      $self.fadeOut(1000); 
      anim_loop((i + 1)); 
     }, 3000); 
    }); 

環路正常工作一個有趣的例子。

我在腦海中有以下疑問。

每個單選按鈕對應一個div。如果環路在位置3，應選擇無線電3等等。這是如何完成的？反之亦然收音機應該操縱循環，就像2路綁定。

此外，單擊左右按鈕也應該改變循環。因此，假設循環處於位置3並且左鍵單擊，則應該返回2.

如何優雅地完成所有這些事件綁定而不重複代碼？

Answer 1

嘗試

<button id="left" data-dir="-1">Left</button> 
<button id="right" data-dir="1">right</button> 

然後

var $elements = $('#One, #Two, #Three, #Four'); 
var $radios = $('input[name="op"]'); 

var timer; 
function anim_loop(index) { 
    if(timer){ 
     $elements.filter('.current').stop(true, true).hide().removeClass('current'); 
     clearTimeout(timer) 
    } 
    $radios.eq(index).prop('checked', true); 
    $elements.eq(index).stop(true, true).addClass('current').fadeIn(1000, function() { 
     var $self = $(this); 
     timer = setTimeout(function() { 
      $self.fadeOut(1000).removeClass('current'); 
      anim_loop((index + 1) % $elements.length); 
      timer = undefined; 
     }, 3000); 
    }); 
} 

$radios.click(function(){ 
    anim_loop($radios.index(this)); 
}); 

$('#left, #right').click(function() { 
    var index = $elements.index($elements.filter('.current')) + $(this).data('dir'); 
    anim_loop(index % $elements.length) 
}) 

anim_loop(0); // start with the first element 

演示：Fiddle