jQuery遍歷數組並反向

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