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

});

});

看看是否有效。

问题单击“数组缩略图”以获取全尺寸图像，使用“下一个”和“上一个”按钮

1 个答案: