jquery - jquery photo gallery next-prev 按钮绑定问题

Question

我正在使用这个照片库：

$('.normsize img:gt(0)').hide();
$('.photos a').click(function(){
    var index = $('.photos a').index(this);
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
});

带有 div 中的缩略图和旁边的正常大小的图片。

我的问题是：我将如何绑定下一个和上一个按钮。它可能比我已经使用的更简单。

编辑：固定代码输出。

Answer 1

您必须将当前图像索引存储在全局变量中。

var currentIndex = 0;
var lastIndex = $('.normsize img').size() - 1;

function showPic(index) {
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
    currentIndex = index;
}

$('.photos a').click(function() {
    showPic($('.photos a').index(this));
});

$('#next').click(function() {
    // If is the last go to first, else go to next
    showPic(currentIndex == lastIndex ? 0 : currentIndex + 1);
});

$('#prev').click(function() {
    // If is the first, go to last, else go to previous
    showPic(currentIndex == 0 ? lastIndex : currentIndex - 1);
});

$('.normsize img').hide(); // Hide all
showPic(0); // Initialize first picture shown