一款好玩的jquery滑屏特效

这是我很久以前刚学jquery时，做的一个滑屏特效。
今天翻出来看了一下，写的很菜，不过功能是实现了的。
现在晒出来给初学者看看，也希望喜欢玩jquery的朋友能一起学习探讨下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function(){
var cpx=0; //点击时X坐标
var mpx=0; //鼠标放开时X坐标
var index=1; //当前元素属于父元素的第几个子元素
var left; //元素左距
var prev; //上一兄弟元素
var dn; //当前元素
var next; //下一兄弟元素
var lock=0;
var ps;
var pd=new Object();
$("#main").mousedown(function(e){
$(this).addClass("border");
}).mouseup(function(e){
$(this).removeClass("border");
}).mouseout(function(){
$(this).removeClass("border");
});
$("#main > div").mousedown(function(e){
$("#d0").addClass("change");
dn=$(this);
index=dn.index();
prev=dn.prev();
next=dn.next();
cpx=e.pageX-dn.offset().left;

}).mouseup(function(e){
mpx=e.pageX-cpx-dn.offset().left;
move();
});
function move(){
$("#info").text(index+","+mpx);
if(lock==1) return;
lock=1;
if(mpx>50 && index>0){
$(prev).animate({left:"0px"},2000);
$(dn).animate({left:"800px"},2000);
index-=1;
setTimeout(unlock,2000);
}else if(mpx<-50 && index<2){
$(dn).animate({left:"-800px"},2000);
$(next).animate({left:"0px"},2000);
index+=1;
setTimeout(unlock,2000);
}else{
setTimeout(unlock,0);
}

}

$("#b1").click(function(){
if(index==0||lock==1){
return;
}
lock=1;
$("#d1").css("left","-800px");
if(index==1){
$("#d3").css("left","800px");
$("#d2").animate({left:"800px"},2000);
}
if(index==2){
$("#d2").css("left","800px");
$("#d3").animate({left:"800px"},2000);
}

$("#d1").animate({left:"0px"},2000);
setTimeout(unlock,2000);
index=0;
});
$("#b2").click(function(){
if(index==1||lock==1){
return;
}
lock=1;
if(index==0){
$("#d2").css("left","800px");
$("#d3").css("left","800px");
$("#d1").animate({left:"-800px"},2000);
}
if(index==2){
$("#d1").css("left","-800px");
$("#d2").css("left","-800px");
$("#d3").animate({left:"800px"},2000);
}
$("#d2").animate({left:"0px"},2000);
index=1;
setTimeout(unlock,2000);
});
$("#b3").click(function(){
if(index==2||lock==1){
return;
}
lock=1;
$("#d3").css("left","800px");
if(index==0){
$("#d2").css("left","-800px");
$("#d1").animate({left:"-800px"},2000);
}
if(index==1){
$("#d1").css("left","-800px");
$("#d2").animate({left:"-800px"},2000);
}
$("#d3").animate({left:"0px"},2000);
index=2;
setTimeout(unlock,2000);
}); function unlock(){lock=0;}
});
</script>
<style>
*{margin:0px; padding:0px;}
.border{
border:1px solid red;
cursor:pointer;
}
.change{
height:400px;
top:0px;
}
.point{
width:10px;
height:10px;
background-color:red;
position:absolute;
opacity:0.5;
z-index:100;
}
#main{
width:804px;
height:404px;
margin:80px auto 10px;
overflow :hidden;
position:relative;
}
#d1,#d2,#d3{
width:800px;
height:400px;
position:absolute;
}
#d1{
left:-800px;
}
#d2{
left:0px;
}
#d3{
left:800px;
}
#d4{
width:100%;
height:160px;
margin:25px auto;
text-align:center;
}
#d5{
width:300px;
height:50px;
margin:0px auto;
border:1px solid blue;
text-align:center;
}
#d0{
width:100%;
height:20px;
position:absolute;
top:190px;
left:0px;
}
#line{
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
background-color:red;
opacity:0.1;
z-index:-1;
}
.s1,.s2,.s3{
width:100px;
height:100px;
margin:30px 50px;
float:left;
}
.s1{
background:#aa22ee;
}
.s2{
background:#897234;
}
.s3{
background:#acfedb;
}
</style>
</head>
<body>
<div id="main">
<div id="d1">
<div id="d4">
<a href="http://www.baidu.com"><span class="s1">a1</span></a>
<span class="s1">a1</span>
<span class="s1">a1</span>
<span class="s1">a1</span>
</div>
<div id="d4">
<span class="s1">b1</span>
<span class="s1">b1</span>
<span class="s1">b1</span>
<span class="s1">b1</span>
</div>
<span id="d0" title="鼠标横向拖动可翻页"></span>
</div>
<div id="d2">
<div id="d4">
<a href="http://www.baidu.com"><span class="s2">a2</span></a>
<span class="s2">a2</span>
<span class="s2">a2</span>
<span class="s2">a2</span>
</div>

<div id="d4">
<span class="s2">b2</span>
<span class="s2">b2</span>
<span class="s2">b2</span>
<span class="s2">b2</span>
</div>
<span id="d0" title="鼠标横向拖动可翻页"></span>
</div>
<div id="d3">
<div id="d4">
<a href="http://www.baidu.com"><span class="s3">a3</span></a>
<span class="s3">a3</span>
<span class="s3">a3</span>
<span class="s3">a3</span>
</div>
<div id="d4">
<span class="s3">b3</span>
<span class="s3">b3</span>
<span class="s3">b3</span>
<span class="s3">b3</span>
</div>
<span id="d0" title="鼠标横向拖动可翻页"></span>
</div>
</div>

<div id="d5">
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<input type="button" value="按钮3" id="b3"><br/>
<label id="info"></label>
</div>
<div id="line"></div>
</body>
</html>