在滑塊下方添加導航按鈕

Question

我有一個使用Jquery制作的非常簡單的Slider，我想在滑塊下添加導航。 可能是點盒，一切都很好。

請幫助我。 以下是代碼

        $(document).ready(function(){

            $('.sp').first().addClass('active');
            $('.sp').hide();    
            $('.active').show();

                $('#button-next').click(function(){

                $('.active').removeClass('active').addClass('oldActive');    
                               if ( $('.oldActive').is(':last-child')) {
                    $('.sp').first().addClass('active');
                    }
                    else{
                    $('.oldActive').next().addClass('active');
                    }
                $('.oldActive').removeClass('oldActive');
                $('.sp').fadeOut();
                $('.active').fadeIn();


                });

                   $('#button-previous').click(function(){
                $('.active').removeClass('active').addClass('oldActive');    
                       if ( $('.oldActive').is(':first-child')) {
                    $('.sp').last().addClass('active');
                    }
                       else{
                $('.oldActive').prev().addClass('active');
                       }
                $('.oldActive').removeClass('oldActive');
                $('.sp').fadeOut();
                $('.active').fadeIn();
                });
            });
    </script>

    <div id="slider-wrapper">
    <div id="slider">
        <div class="sp" style="background: blue;">akjdfalfkdj</div>
        <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
    </div>
    <div id="button-previous">prev</div>
    <div id="button-next">next</div>
    <div id=""nav"></div>

http://jsfiddle.net/HsEne/15/

Answer 1

你嘗試過這樣的事情

JSFIDDLE

在您的jquery代碼中添加的代碼。

var n = $( "#slider div" ).length;
var i=1;

while(n>i)
{
    $( document.body ).append( $( "<div>"+i+"</div>" ) );
    i++;
}