如何實現水平頁面導航系統？

Question

下面的代碼是類似於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。

讓我知道你是否需要額外的信息，但我的猜測和檢查工作只會毀了東西。

謝謝！

Answer 1

我做了一個簡單而實用的滑蓋系統，不要緊whow許多div的你有證據專區內

您可以在這裏JsFiddle查看（拖動查看）