我正在与一种情况作斗争，并想我会在这里发布问题，看看是否有人能找出我哪里出错了。
我正在做的事情背后的想法如下：
我有一个页面（这实际上是 iPad 应用程序），允许用户左右滚动前后移动。每次用户向左滑动（向前移动）时，我们都希望向他们展示一个新的 768px 页面（宽度）。由于每个 div 的宽度为 768 像素，并且我们可以拥有 50 多个 div，其背后的想法是删除首页。
所以在任何时候我的屏幕上都有 4 个 div，一次只显示 1 个 div。所以在启动时我们有类似下面的东西。
<content>
<div id='wrapper_1'>content</div>
<div id='wrapper_2'>content</div>
<div id='wrapper_3'>content</div>
<div id='wrapper_4'>content</div>
</content>
当用户向右滑动时，我想删除 wrapper_1，添加 wrapper_5 并基本上让所有东西重新定位正确。
我遇到的问题是每次我删除前导 div 时，我的内容 div 显然会改变宽度并且我丢失了我正在查看的页面。因此，在我看来，明显的“修复”是重新定位内容，同时考虑到我刚刚删除的 div。
但是我正在与 jquery 偏移方法作斗争。要么我使用不正确，要么我忽略了一些东西。
$('#wrapper_'+this.pageArray[0]).remove();
this.pageArray.shift();
var n = pageIndex - 1;
var t = 768 * n;
$("#content").offset({ left: t})
我通过将 div 存储在数组中来跟踪页面上的 div。每次我添加一个页面时，我基本上都会在 div 上执行 remove() ，然后在数组上执行 shift 。现在的问题是偏移量不像我预期的那样工作。基本上，左边的值似乎没有给我一个绝对的 x 位置。
首先，这种方法看起来正确吗？其次是我对偏移量的理解/实现不正确吗？
编辑：
对于关注该主题的任何人，似乎我最大的问题是我如何处理手势。似乎存在一些事件冲突，使用手势库当然似乎已经消除了我的很多困惑。
下面是我更新的代码，它似乎运行良好。随意批评这种方法。
<html>
<head>
<style>
.wrapper{
height: 200px;
width: 600px;
overflow: hidden;
}
.button_wrapper{
width: 600px;
}
#content{
background-color: #F00;
height: 200px;
width: 3000px;
}
.page{
width: 200px;
height: 200px;
float: left;
background-color: #FF0;
}
#wrapNext{
width: 100px;
height: 20px;
background-color: #FF0000;
float: right;
cursor: pointer;
}
#wrapPrev{
width: 100px;
height: 20px;
background-color: #FF0000;
float: left;
cursor: pointer;
}
.site_wrap > .slides_wrap {
margin-bottom: 1em;
margin-left: -8px;
margin-right: -8px;
}
.img_slides_wrap {
width: 784px;
border: 8px solid #333333;
background-color: #444444;
overflow: hidden;
}
.img_slide {
padding: 0;
}
.js .img_slide {
/* Overide template's height transitions. */
width: 100%;
height: auto;
}
.slide_buttons_index {
text-align: center;
}
.notransition,
.notransition .slide {
-webkit-transition-duration: 0 !important;
-moz-transition-duration: 0 !important;
-ms-transition-duration: 0 !important;
transition-duration: 0 !important;
-webkit-transition-delay: 0 !important;
-moz-transition-delay: 0 !important;
-ms-transition-delay: 0 !important;
transition-delay: 0 !important;
}
@media screen and (max-width: 640px) {
.img_slides_wrap {
width: 100%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
}
</style>
</head>
<body>
<div class='wrapper'>
<div id='content' class='img_slides_wrap slides_wrap wrap'>
<div id='page0' class='page'>Page 0</div>
<div id='page1' class='page'>Page 1</div>
<div id='page2' class='page'>Page 2</div>
<div id='page3' class='page'>Page 3</div>
</div>
</div>
<div class='button_wrapper'>
<div id='wrapPrev'>
<div id="prev">Previous</div>
</div>
<div id='wrapNext'>
<div id="next">Next</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.event.swipe.js"></script>
<script>
$(document).ready(function() {
var counter = 4;
var selectedPageIndex = 1;
var lastKnownX = 0;
var articleListLength = 10; // testing
$("#next").click(function() {
showNext();
});
$("#prev").click(function() {
showPrev();
});
function showNext(){
if (counter <= articleListLength + 1){
// first remove the leading div
var leadingDiv = $('#page'+(counter - 4));
leadingDiv.animate({ width: '0px' }, 250, function() {
$(this).remove();
});
var html = "<div id='page"+counter+"' class='page img_slide slide'>Page "+counter+"</div>";
$('#content').append(html);
counter ++;
selectedPageIndex ++;
}
}
function showPrev(){
if(counter >= 5){
var target = selectedPageIndex - 1;
var leadingDiv = $('#page'+(target));
var newLeadingDiv = $('#page'+(target - 1));
var html = "<div id='page"+(target-1)+"' class='page img_slide slide' style='width:0px'>Page "+(target-1)+"</div>";
$(html).insertBefore('#page'+(selectedPageIndex-1));
$('#page'+(target - 1)).animate({ width: '200px' }, 250, function() {
});
var removalTarget = $('#page'+(selectedPageIndex + 2));
removalTarget.remove();
counter --;
selectedPageIndex --;
}
}
var wrap = jQuery('.slides_wrap'),
width = wrap.width();
$('#content')
.on('swipeleft', function(e) {
showNext();
})
.on('swiperight', function(e) {
showPrev();
})
});
</script>
</html>