jquer 带左右按钮滚动图片 点击显示大图

<style>
ul{ list-style:none; padding:0px; margin:0px;}
li{ list-style:none; padding:0px; margin:0px;}
.big_pic{ width:300px; height:300px; overflow:hidden; padding-bottom:20px;}
#pic_box{ width:510px; height:200px; overflow:hidden;}
.pic_bon_left{ width:10px; cursor:pointer; height:200px; vertical-align:middle; float:left}
.pic_cen{ float:left; width:480px; padding:5px; overflow:hidden;}
.pic_cen ul{ list-style:none; overflow:hidden; height:160px;}
.pic_cen ul li{ list-style:none; width:100px; height:160px; float:left; padding-right:10px;}
.pic_cen ul li img{ width:96px; height:160px;}
.pic_bon_right{ width:10px; cursor:pointer; height:200px; vertical-align:middle; float:right}
</style>

<div class="big_pic"><img src="img/1.jpg" id="bigimg" /></div>
<div id="pic_box">
<div class="pic_bon_left"><</div>
<div class="pic_cen">
  <ul>
      <li><img src="img/1.jpg" /></li>
      <li><img src="img/2.jpg" /></li>
      <li><img src="img/3.jpg" /></li>
      <li><img src="img/4.jpg" /></li>
      <li><img src="img/5.jpg" /></li>
      <li><img src="img/6.jpg" /></li>
    </ul>
</div>
<div class="pic_bon_right">></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
var prev=$(".pic_bon_left");
var next=$(".pic_bon_right");
var img=$(".pic_cen ul");
var flag="left";
var ad;
var w=$(".pic_cen ul li").outerWidth(true); //outerWidth(options)获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效

      $(".pic_cen ul li").click(function(){
      $src=this.getElementsByTagName("img")[0].src;
      $("#bigimg").attr("src",$src);
      });

       next.click(function(){
            img.animate({"margin-left":-w},function(){
            img.find("li").eq(0).appendTo(img);   //在被选元素img 结尾（仍位于内部） 加入加'eq(0):第一个'li
            img.css({"margin-left":0});
            });
            var flag="left";
       });

       prev.click(function(){
            img.find('li:last').prependTo(img);   //在被选元素img 开头（仍位于内部） 加入最后一个li
            img.css({"margin-left":-w});
            img.animate({"margin-left":0});
            var flag="right";
         });

      $("#pic_box").hover(function(){
      clearInterval(ad);
      },function(){
      ad=setInterval(function(){flag == "left" ? next.click() : prev.click()},3000);
      }).trigger("mouseleave");     

});
</script>