问题点击阵列缩略图获得全尺寸图像，带有“下一步”和“上一步”按钮

我已经想好了如何用点击按钮来替换我的背景图像，但现在我想在"库"中有缩略图，你也可以点击。我已经想好了如何通过点击"下一个"one_answers"上一个"按钮来更改图像，但每当我试图同时点击缩略图时，它真的会把事情搞砸。基本上，我希望能够点击缩略图并更改索引号，这样当你点击"下一个"按钮时，它会转到行中的下一个图像，而在返回行中的第二个图像之前，无论你点击了什么缩略图。为了简洁起见，我只包含了"下一图像"功能。

问题是，当我点击缩略图时，它会转到右边的图像，但如果你点击"下一个"按钮，它就会转到第二个图像，无论你是在第7个图像上，还是在第5个图像上等等。所以，基本上，我不知道如何获得下一个图像函数来读取当前图像的索引号。

谢谢！！！

//beginning of the whole background slideshow function
$(function() {
//setting the arrays
var colorBackgrounds = new Array(
'url(backgrounds/photoTest/20140714-_MG_0604.jpg)',
'url(backgrounds/photoTest/20140714-_MG_0860.jpg)',
'url(backgrounds/photoTest/20140716-IMG_1296.jpg)'
);
 var backgroundThumbs = new Array(
'/backgrounds/photoTest/20140714-_MG_0604_TN.jpg)',
'/backgrounds/photoTest/20140714-_MG_0860_TN.jpg)',
'/backgrounds/photoTest/20140716-IMG_1296_TN.jpg)'
);
 var colorCurrent = 0;
 var tnCurrent = 0;
//populating the div with the thumbnails & click function (works)
 backgroundThumbs.forEach(function(value,index) {
    $('#thumbID_' + index).html('<img src="' + value + '" class="thumbImage" />');
    $('#thumbID_' + index).click(function() {
        var tnCurrent = index;
        var colorCurrent = tnCurrent;
    $('.bodyBackground').fadeOut(500, function() { 
        $('.bodyBackground').css({
            'background':colorBackgrounds[colorCurrent],
            'background-position':'center center',
            'background-repeat':'no-repeat',
            'background-attachment':'fixed'});
            $('.bodyBackground').fadeIn(500);           
        }); 
    });
});
//beginning of nextBackground function (works, but doesn't take into account thumbnail click changes)
$('.nextImageWrapper').click(function() {
    $('.bodyBackground').fadeOut(500, function() { 
        $('.bodyBackground').css({
            'background':colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
            'background-position':'center center',
            'background-repeat':'no-repeat',
            'background-attachment':'fixed'});
            $('.bodyBackground').fadeIn(500);
    }); 
});

$(function() {
 var colorCurrent = 0;
 var tnCurrent = 0;
 // rest code
backgroundThumbs.forEach(function(value,index) {
 // rest code    
 tnCurrent = index;
 colorCurrent = tnCurrent;
 // rest code
});
});