下面的代码是横向页面拖动导航系统的功能，类似于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。
如果您需要其他信息，请告诉我，但我的猜测和检查工作只会破坏事情。
谢谢！