問題點擊數組縮略圖查看全尺寸圖片，使用下一個和上一個按鈕

Question

我已經想出瞭如何讓我的背景圖像替換爲點擊按鈕，但現在我想在「圖庫」中放置縮略圖圖像「你也可以點擊。我已經想出瞭如何通過單擊「下一個」和「上一個」按鈕來改變圖像，但是每當我嘗試合併單擊縮略圖時，它都會讓事情變得麻煩。基本上，我希望能夠點擊一個縮略圖並更改索引編號，因此當您點擊「下一步」按鈕時，它將按順序進入下一個圖像，而在它回到排隊的第二個圖像之前，無論你點擊了什麼縮略圖。爲了簡潔起見，我只包含了「下一張圖片」功能。

問題是，當我點擊縮略圖時，它會轉到正確的圖像，但如果您點擊「下一步」按鈕，它會轉到第二張圖像，無論您是否在第7張圖像上，第五等。所以，基本上，我不知道如何獲得下一個圖像函數來讀取當前圖像的索引號。

謝謝!!!

//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 

}); 

}); 

看看是否能工程。