如何在jquery滑塊上添加幻燈片計數器？

Question

我是jquery的新手，並希望以位於next/prev導航按鈕旁邊的「當前幻燈片/總幻燈片」的形式實現幻燈片計數。這是我在圖像滑塊方面的。謝謝你的幫助！

$(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; 
}); 
});