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

jquery照片库next-prev按钮绑定问题

1 个答案: