请高手看看我这段代码错在哪里？

下面这段代码，实现幻灯与前后图片切换功能，结果是向前切换不行，其它效果都可以。
对前端技术很一般，请教高手指点。
<!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>
<title>图片幻灯及前后切换</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">
*{
 font-size:12px;
 color:#333;
 text-decoration:none;
 padding:0;
 margin:0;
 list-style:none;
 font-style:normal;
 font-family:Arial,Helvetica,sans-serif;
}
.lxfscroll{
 width:800px;
 margin-left:auto;
 margin-right:auto;
 margin-top:20px;
 position:relative;
 height:480px;
 border:4px solid #EFEFEF;
 overflow:hidden;
}
.lxfscroll ul li{
 height:480px;
 width:800px;
 text-align:center;
 line-height:480px;
 position:absolute;
 font-size:40px;
 font-weight:bold;
}
.lxfscroll-title{
 width:800px;
 margin-right:auto;
 margin-left:auto;
}
.lxfscroll-title li{
 height:20px;
 width:20px;
 float:left;
 line-height:20px;
 text-align:center;
 border:1px dashed #CCC;
 margin-top:2px;
 cursor:pointer;
 margin-right:6px;
}
.cur{
 color:#FFF;
 font-weight:bold;
 background:#000;
}
.lxfscroll ul{
 position:absolute;
}#tooltip{ 
position:absolute; 
border:1px solid #333; 
background:#f7f5d1; 
padding:2px 5px; 
color:#333; 
display:none; 
}p{ 
clear:both; 
margin:0; 
padding:.5em 0; 
}img{
 position:absolute;
 left:50px;
 top:50px ;
}
 
</style><script type="text/javascript" src= "jquery-1.4.4.min.js"></script>
<script type="text/javascript" >$(function(){ var xOffset = 10;
var yOffset = 20;
   
for (var i=0; i < photos.length; i++) {
$tmp = '<li><img src=' +  photos[i] +' width="600" height="400"></li>';
$($tmp).insertBefore('#end');

var t=i+1;
if(i!=0) $tmp = '<li>' + t + '</li>';
else $tmp = '<li class="cur">' + t + '</li>';
$($tmp).insertBefore('#title-end');
};    
   
var ul = $(".lxfscroll ul");
var li = $(".lxfscroll li");
var tli = $(".lxfscroll-title li"); 
var speed = 450;//切换的速度
var autospeed = 4000;//自动播放的速度
var i=1;
var index = 0;
var n = 0;
var lilength = li.length;    /* Icon Butter Event */
function lxfscroll(){  
tli.mouseenter(function(){
i++; 
var index = tli.index($(this));     
tli.removeClass("cur");
$(this).addClass("cur"); ul.css({"left":"0px"}); 
li.css({"left":"0px"}); 
li.eq(index).css({"z-index":i}); 
li.eq(index).css({"left":"800px"}); 
if (!ul.is(":animated")) {
ul.animate({left:"-800px"},speed); 
}
});
};

 /* Auto Roll */
function autoroll() {
if(n >= lilength)
n = 0;
tli.removeClass("cur");
tli.eq(n).addClass("cur");
ul.css({"left":"0px"});
li.css({"left":"0px"});
li.eq(n).css({"z-index":i});
li.eq(n).css({"left":"800px"});
n++;
i++;
timer = setTimeout(autoroll, autospeed);
ul.animate({left:"-800px"},speed);
};  function clicktest(){
li.click(function(e){ var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;
if(positionX<=$(this).width()/2){//就是这段代码出现问题，不能实现正常向前切换图片。
n--;
i--;

if(n <0 )
n = lilength-1;

tli.removeClass("cur");
tli.eq(n).addClass("cur");

ul.css({"left":"0px"});
li.css({"left":"0px"});
li.eq(n).css({"z-index":i});
li.eq(n).css({"left":"-800px"});
ul.animate({left:"0px"},speed);

} else {

if(n >= lilength)
n = 0;
tli.removeClass("cur");
tli.eq(n).addClass("cur");
ul.css({"left":"0px"});
li.css({"left":"0px"});
li.eq(n).css({"z-index":i});
li.eq(n).css({"left":"800px"});
n++;
i++;
ul.animate({left:"-800px"},speed);
}

},function(){
timer = setTimeout(autoroll, autospeed);
});
};
/* Stop Roll When Hover */
function stoproll(){
li.hover(function(){
clearTimeout(timer);
n = $(this).prevAll().length+1;
}, function(){
timer = setTimeout(autoroll, autospeed);
});
tli.hover(function(){
clearTimeout(timer);
n = $(this).prevAll().length+1;
}, function(){
timer = setTimeout(autoroll, autospeed);
});
};function moveroll(){
   li.mousemove(function(e){
 
var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//获取当前鼠标相对this的x坐标 var positionY=e.originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0; var tipTitle;
if(positionX<=$(this).outerWidth()/2)
{ 
$('p').remove();
$(this).css("cursor","url('../Fig/arrow_left.cur'), pointer");
tipTitle='上一张'; 
} else {
$('p').remove(); 
$(this).css("cursor","url('../Fig/arrow_right.cur'), pointer");
tipTitle='下一张'; 
} $("body").append("<p id='tooltip'>"+tipTitle+"</p>");
$("#tooltip").css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px").fadeIn("fast");

},function(){ $("#tooltip").remove();
}); }; moveroll();
clicktest();
lxfscroll();
autoroll();
stoproll();

});</script></head><body>
<div class="lxfscroll">
  <ul>
<p id="end">
  </ul>
</div>
<div class="lxfscroll-title">
  <ul>
<p id="title-end">
  </ul>
</div><script type="text/javascript">
var photos =  [ '../Fig/slide-5.jpg', '../Fig/slide-6.jpg', '../Fig/slide-7.jpg', '../Fig/slide-8.jpg',  '../Fig/slide-2.jpg', '../Fig/slide-1.jpg',  '../Fig/slide-3.jpg', '../Fig/slide-4.jpg'];
</script></body>
</html>