如何实现水平页面导航系统

下面的代码是类似于www.blacknegative.com的水平页面拖动导航系统的功能，用户单击并向左或向右拖动以查看不同的页面。目前这是为四页设置的，但我需要十页，我不知道如何更新这里包含的数学来添加这些页面：

function initDrag(){
    var selfWidth = $("#proof").width();
    var selfLimit = selfWidth * .75;
    var slide2 = selfWidth * 0.25;
    var slide3 = selfWidth * 0.5;

    var currentIndex = 0;
    var items = [];
    $("#proof > div").each(function(){
        items.push({
            element:$(this),
            id:$(this).attr("id")
        });
    });
    $('#proof').draggable({
        axis: 'x',
        cursor: 'move',
        containment: [-selfLimit, 0, 0, 0, 0],
        start: function(event,ui){
            event.stopPropagation();
            var offsetXPos = parseInt(ui.offset.left) * -1;
            if (offsetXPos >= 0 && offsetXPos < selfWidth * 0.25){
                currentIndex = 0;
            } else if (offsetXPos >= selfWidth * 0.25 && offsetXPos < selfWidth * 0.5){
                currentIndex = 1;
            } else if (offsetXPos >= selfWidth * 0.5 && offsetXPos < selfWidth * 0.75){
                currentIndex = 2;
            } else {
                currentIndex = 3;   
            };
            console.log(currentIndex);
        },
        stop: function(event,ui){
            event.stopPropagation();
            var offsetXPos = parseInt(ui.offset.left) * -1;
            console.log(offsetXPos);
            var updatedPosition;
            if(currentIndex == 0){
                if(offsetXPos >= selfWidth * 0.04){
                    $('#proof').animate({
                        left: slide2 * -1
                    });
                } else {
                    $('#proof').animate({
                        left: 0
                    });
                }
            } else if(currentIndex == 1){
                if(offsetXPos >= selfWidth * 0.29){
                    $('#proof').animate({
                        left: slide3 * -1
                    });
                } else if(offsetXPos <= selfWidth * 0.21){
                    $('#proof').animate({
                        left: 0
                    });
                } else {
                    $('#proof').animate({
                        left: slide2 * -1
                    });
                }
            } else if(currentIndex == 2){
                if(offsetXPos <= selfWidth * 0.46){
                    $('#proof').animate({
                        left: slide2 * -1
                    });
                } else if(offsetXPos >= selfWidth * 0.54){
                    $('#proof').animate({
                        left: selfLimit * -1
                    });
                } else {
                    $('#proof').animate({
                        left: slide3 * -1
                    });
                }
            } else {
                if(offsetXPos <= selfWidth * 0.71){
                    $('#proof').animate({
                        left: slide3 * -1
                    });
                } else {
                    $('#proof').animate({
                        left: selfLimit * -1
                    });
                }
            }
        }
    });
}
$(document).ready(function(){
    initDrag();
    window.onresize = function(){
        initDrag();
    };
    $('a.gallery').colorbox();
    //Examples of how to assign the ColorBox event to elements
    $(".group1").colorbox({rel:'group1'});
    $(".group2").colorbox({rel:'group2', transition:"fade"});
    $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    $(".group4").colorbox({rel:'group4', slideshow:true});
    $(".ajax").colorbox();
    $(".youtube").colorbox({iframe:true, innerWidth:900, innerHeight:506});
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    $(".inline").colorbox({inline:true, width:"50%"});
    $(".callbacks").colorbox({
        onOpen:function(){ alert('onOpen: colorbox is about to open'); },
        onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
        onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
        onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
        onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    });
    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
        return false;
    });

});

调用这些页面的CSS是#page-1到#page-4。

如果你需要更多信息，请告诉我，但我的猜测和检查工作只会毁掉一切。

谢谢！