jquery loop through array and reverse

Question

Как я могу пройти через этот массив, который изменяет цвет фона css хронологически, а не случайным образом и обратный через тот же массив, когда нажата кнопка «Назад»?

http://jsfiddle.net/qK2Dk/

$('#right').click(function(){ 

var bgImages = ["#fff", "#f00", "#000", "#f0f", "#ccc", "#ddd", "#eee", "#bbb"]; 
var bgImage = bgImages[Math.floor(Math.random() * bgImages.length)]; 
var image = bgImage; 

var element = document.getElementById('bgImage'); 
element.style.background = image; // IE fallback 

}); 


<a class="left carousel-control" id="left" href="#carousel" data-slide="prev"> 
<span>Left</span> 
</a> 
<br /> 
<a class="right carousel-control" id="right" href="#carousel" data-slide="next"> 
<span>Right</span> 
</a> 

<div id="bgImage"> 
test 
</div> 

Answer 1

Попробуйте

var ix=0; 
$('#right').click(function(){ 

    var bgImages = ["#fff", "#f00", "#000", "#f0f", "#ccc", "#ddd", "#eee", "#bbb"]; 
    var bgImage = bgImages[ix]; 
    if(ix<bgImages.length){ 
     ix++; 
    } 

    var image = bgImage; 
    var element = document.getElementById('bgImage'); 
    element.style.background = image; // IE fallback 

}); 

$('#left').click(function(){ 

    var bgImages = ["#fff", "#f00", "#000", "#f0f", "#ccc", "#ddd", "#eee", "#bbb"]; 
    if(ix>0){ 
     ix--; 
    } 
    var bgImage = bgImages[ix]; 


    var image = bgImage; 
    var element = document.getElementById('bgImage'); 
    element.style.background = image; // IE fallback 

}); 

DEMO