jQuery鼠标经过图片切换

<script type="text/javascript" src="jquery-1.7.2.js"></script>

HTML代码：

<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>

CSS代码：

*{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;}

jQuery代码：

<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>