滑动计算的问题

这是一个我的小函数，做成效果类似层的滑动。700是一个<li>的宽度，.next，.previrous是上一页，下一页的按钮。
通过移动<ul>达到切换页面效果。
但是我的ps1（1==“L”小写）必须做成公有的变量。我想把它放到函数里。也想把它做成dom属性来记录但总不成功，求人帮我改一下，或者说说别的做这种效果的大体方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" src="../jquery-1.6.js"></script>
<script language="javascript" src="../plugin/jquery.easing.1.3/jquery.easing.1.3.js"></script>
<script language="javascript">
$(document).ready(function(){
        var psl=0
$('.slider .next').click(function(){
if(psl>1){
return false;}
       psl=psl+1
$('.slider>ul').animate({left:-700*(psl)},'normal','easeOutBounce',function(){ })
})
$('.slider .previous').click(function(){
if(psl<1){
return false;}
       psl=psl-1
$('.slider>ul').animate({left:-700*(psl)},'normal','easeOutBounce')
}) })
</script>zz
<style type="text/css">
body{ }

.slider ul{
position:relative;
width:2100px;
position:relative;
padding:0px 0px;
margin:0px 0px;
list-style:none;}
.slider{
position:relative;
border-radius:8px; width:700px;
height:400px;
overflow:hidden;
background-image:url(../image/body_bg_new.jpg)
}.slider>ul>li{
display:inline-block;
width:700px;
height:400px;
overflow:hidden;
}
 .next{
position:absolute;
top:200px;
left:650px;
padding:5px 5px;
border:1px solid #F00;
cursor:pointer;
}
.previous{
position:absolute;
top:200px;
left:5px;
padding:5px 5px;
border:1px solid #F00;
cursor:pointer;
background:rgba(255, 0, 0,0.5)
}
.slider_li1{
background:rgba(218, 202, 155,0.1);
text-align:center;
}
.slider_li2{
background:rgba(254, 248, 226,0.3);
text-align:center;
}
.slider_li3{
background:rgb(226, 182, 146,0.3);
text-align:center;
}
</style>
</head><body>
<div class="slider">
<ul>
<li  class="slider_li1">
<p>这是我的简历</p></li><li class="slider_li2" >zxzx</li><li  class="slider_li3"  >dfg2</li>
</ul>
<div class="next">next</div>
<div class="previous">previous</div>
</div></body>
</html>