问题单击阵列缩略图以获取全尺寸图像，带有“下一个”和“上一个”按钮

Question

我已经知道如何通过单击按钮来替换我的背景图像，但现在我想在“图库”中添加缩略图图像，您也可以单击它。我已经想出了如何通过单击“下一个”和“上一个”按钮来更改图像，但是每当我尝试同时单击缩略图时，它真的把事情搞砸了。基本上，我希望能够单击缩略图并更改索引号，因此当您点击“下一个”按钮时，它会转到下一个图像，而在它返回到第二个图像之前，不管您点击的缩略图。为简洁起见，我只包含了“下一张图片”功能。

问题是当我点击缩略图时，它会转到正确的图像，但是如果你点击“下一步”按钮，它只会转到第二个图像，不管你是否在第 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);

    }); 
});

Answer 1

$(function() {

 var colorCurrent = 0;
 var tnCurrent = 0;

 // rest code

backgroundThumbs.forEach(function(value,index) {

 // rest code    

 tnCurrent = index;
 colorCurrent = tnCurrent;

 // rest code

});

});

看看这是否有效。