显示分页

$(function(){
    $('.carousel ul').anoSlide({
        items: 1,
        speed: 500,
        prev: 'a.prev',
        next: 'a.next',
        onConstruct: function(instance){
            var paging = $('<div/>').addClass('paging fix').css({
                position: 'absolute',
                top: 1,
                left:50 + '%',
                width: instance.slides.length * 40,
                marginLeft: -(instance.slides.length * 40)/2
            });
                
            for (i = 0, l = instance.slides.length; i < l; i++){
                var a = $('<a/>').data('index', i).appendTo(paging).on({
                    click: function(){
                        instance.stop().go($(this).data('index'));
                    }
                });
                if (i == instance.current){
                    a.addClass('current');
                }
            }

            instance.element.parent().append(paging);
        },
        onStart: function(ui){
            var paging = $('.paging');
            paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
        }
    });
});

<div class="carousel">
    <a class="prev"></a>
    <ul>
        <li><a href="javascript:"><img src="images/slides/1.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/2.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/3.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/4.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/5.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/6.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/7.jpg"></a></li>
    </ul>
    <a class="next"></a>
</div>