#essay{width:555px;height:488px;position:relative;overflow:hidden;}
 
#essay-content{width:555000px;height:488px;position:absolute;}
 
#essay-content .postlist{width:555px;float:left;}

 
<div id="essay"><!-- 第一个限高度限宽度，相对定位，超出隐藏； -->
 
	<div id="essay-content"><!-- 第二个限高，宽度设为超大，绝对定位； -->
 
		<div class="postlist"><!-- 第三个限宽，左浮动。 -->
 
			<!-- 文章循环 1 -->
 
		</div>
 
		<div class="postlist">
 
			<!-- 文章循环 2 -->
 
		</div>
 
	</div>
 
</div>
 
<!-- 导航的html代码 -->
 
<div id="pagelist">
 
	<a id="prev">上一页</a>
 
	<a id="nnum">1</a>
 
	<a id="next">下一页</a>
 
</div>

 
$('#next').click(function(){  //下一页点击事件
 
	var dnum=parseFloat($('#nnum').text());  //取得当前显示的页码
 
	$('#essay-content').animate({left:'-=555'},{  //纸带向左滑555px
 
		duration:400,
 
		complete:function(){
 
			$('#nnum').text(dnum+1);  //滑完给页码+1
 
		}
 
	});
 
});
 
$('#prev').click(function(){  //上一页点击事件
 
	var dnum=parseFloat($('#nnum').text());
 
	if(dnum>1){  //当前页码大于1才执行，即第一页时不滑动
 
	$('#essay-content').animate({left:'+=555'},{  //纸带向右滑555px
 
		duration:400,
 
		complete:function(){
 
			$('#nnum').text(dnum-1);  //滑完给页码-1
 
		}
 
	});
 
	}
 
});

 
var num=1,noclick=false;  //num来记录预加载次数，并设置默认不响应点击
 
$('#next').click(function(){
 
	var dnum=parseFloat($('#nnum').text()),nnum=dnum+2,cnum=num-dnum;
 
	//dnum为当前显示页码，nnum是Ajax预加载的页码，cnum为预加载次数与当前页码之差
 
if(noclick!=true){noclick=true;  //点击响应判断，当Ajax完成后才允许再点击
 
	if(cnum>=0){  //中途点击过上一页，再点下一页时
 
	$('#essay-content').animate({left:'-=555'},{
 
		duration:400,
 
		complete:function(){
 
			$('#nnum').text(dnum+1);
 
			$('#prev:hidden').fadeIn(300);  //如果“上一页”不可见则渐显
 
			noclick=false;  //直接允许响应点击
 
		}
 
	});
 
	}
 
	if(cnum==0){  //预加载次数和当前页数码一样时，才再一次执行Ajax预加载。
 
		if($('.postlist').eq(dnum).children().length<8){  //待滑出的文章列表数小于8时
 
			$('#next').fadeOut(300);  //“下一页”渐隐
 
		}
 
		$.ajax({
 
			url: "?action=ajax_post&pag="+nnum,  //php段配合，获取当前页后2页的文章列表
 
			success:function(a){
 
				if(a.length > 0){  //如果有返回数据时
 
					$('#essay-content').append("<div class='postlist'>"+a+"</div>");  //追加到第二个DIV里
 
					num++;  //预加载次数累加1
 
				}else{  //如果无返回数据时
 
					$('#next').hide(0);  //“下一页”隐藏，主要针对待滑出的文章列表数等于8时做的处理
 
				}
 
				noclick=false;  //允许响应点击
 
			}
 
		});
 
	}
 
}
 
});
 
 
 
$('#prev').click(function(){
 
if(noclick!=true){noclick=true;
 
	var dnum=parseFloat($('#nnum').text());
 
	if(dnum>1){  //当前页码大于1时
 
		$('#essay-content').animate({left:'+=555'},{
 
			duration:400,
 
			complete:function(){
 
				$('#nnum').text(dnum-1);
 
				$('#next:hidden').fadeIn(300);  //如果“下一页”不可见则渐显
 
				noclick=false;
 
			}
 
		});
 
		if(dnum==2){  //页码为2时
 
			$('#prev').fadeOut(300); //“上一页”渐隐
 
		}
 
	}
 
}
 
});