jQuery鼠标经过图片切换

<div class="picBox" id="pic">
<ul>
<li>
<div><span>标题一</span><img src="01.jpg" width="282" height="157" /> </div>
</li>
<li>
<div><span>标题二</span> <img src="02.jpg" width="282" height="157" /> </div>
</li>
<li>
<div><span>标题三</span> <img src="03.jpg" width="282" height="157" /> </div>
</li>
<li>
<div><span>标题四</span> <img src="04.jpg" width="282" height="157" /> </div>
</li>
</ul>
</div>

*{padding:0;margin:0; line-height:25px;}
ul,li{ list-style:none;}
.picBox{ overflow:hidden; width:414px; margin:30px auto 0;}
.picBox ul li{float:left;overflow:hidden;height:157px; vertical-align:middle;}
.picBox ul li span{ float:left; background:url(t.jpg) no-repeat; height:157px; width:23px;color:#FFFFFF; line-height:35px; font-size:16px; text-align:center; padding:0 5px;cursor:pointer}
.picBox ul li img{float:left}
.picBox ul li span.over{color:#900;}

<script>
$(document).ready(function(){
var playindex = 0;
var flag = true;
$('.picBox img').css('width','0').eq(0).css('width','282px');
$('.picBox li').bind('mouseover',function(){
if (flag==true){
var index = $(this).index();
if (playindex!=index){
flag = false;
$('.picBox img').eq(playindex).animate({'width':'0px'},500);
$('.picBox img').eq(index).animate({'width':'282px'},500,function(){
flag = true;
});
}
playindex = index;
}
})
});
</script>