jquery - 如何在 jquery 滑块上添加幻灯片计数器？

Question

我是 jquery 的新手，想以位于下一个/上一个导航按钮旁边的“当前幻灯片/总幻灯片”的形式实现幻灯片计数。这是我在图像滑块方面的内容。谢谢你的帮助！

$(function() {
    $('#navigation a').click(function() {
        var button = $(this).attr('id');
        var current_image = $('#image img.active');
        var next;
        if (button == 'previous') {
            next = ($('#image img.active').prev().length > 0) ? $('#image img.active').prev() : $('#image img:last-child');
        } else {
            next = ($('#image img.active').next().length > 0) ? $('#image img.active').next() : $('#image img:first-child');
        }
        next.css('z-index', 2).show();
        current_image.fadeOut(600, function() {
            $(this).css('z-index', 1).removeClass('active');
            next.css('z-index', 3).addClass('active');
        });
        return false;
    });
});​

Answer 1

尝试这个

$(function() {
var $slides=$('#image img'),klass='active';
$('#navigation a').click(function() {
    var button = $(this).attr('id');
    var current_image = $slides.filter('.'+klass);
    var index=$slides.index(current_image.get(0));
    if (button == 'previous') {
        index=current_image.prev().length?--index:-1;
    } else {
        index=current_image.next().length?++index:0;
    }
    var next=$slides.eq(index);

    next.css('z-index', 2).show();
    current_image.fadeOut(600, function() {
        $(this).css('z-index', 1).removeClass(klass);
        next.css('z-index', 3).addClass(klass);
    });
    return false;
});
});