Цикл через массив на клик

Question

У меня есть массив адресов, например:

var urls = ["http://www.getbootstrap.com","http://www.reddit.com","http://www.bbc.com/news","http://www.google.com"]; 

и у меня есть IFRAME:

<iframe></iframe> 

и две ссылки:

<a href="#" id="forwards">Forwards</a> <a href="#" id="backwards">Backwards</a> 

Что Я пытаюсь сделать это, связывая его так, чтобы показывал первый URL-адрес в массиве, и когда вы нажимаете либо вперед, либо назад, он меняет th e src атрибут либо для следующего URL-адреса, либо для предыдущего URL-адреса. Кроме того, когда он находится в начале или конце массива, тогда нажатие кнопок должно проходить до конца или начала массива, уважительно. У меня есть это:

$('#forwards').click(function(){ 
    current++; 
    $('iframe')[0].src = urls[current]; 
}); 

и то же идти в обратном направлении, но это очень неэффективно, и не работает, когда вы дойдете до любого конца массива. Есть ли лучший способ сделать это?

Answer 1

DEMO

var urls = ["http://www.getbootstrap.com", 
      "http://www.reddit.com", 
      "http://www.bbc.com/news", 
      "http://www.google.com" 
      ], 
    c = 0, 
    n = urls.length; 

$('#forwards, #backwards').click(function(e){ 
    e.preventDefault(); 
    c = this.id=='forwards' ? ++c : --c; 
    c = c<0? n-1 : c%n ; 

    $('iframe')[0].src = urls[c]; 
}); 

^{нотабене} Google использует заголовок X-Frame-Options, чтобы предотвратить его включение в iframe внутри внешней страницы.