jquery带小图的图片轮换效果

右边显示大图，左边显示小图

<style>
ul{ list-style:none; padding:0px; margin:0px;}
li{ list-style:none; padding:0px; margin:0px;}
.pic_box{ width:510px; height:200px; overflow:hidden;}
.pic_box .pic_box_left{ width:300px; height:200px; float:left}
.pic_box .pic_box_left img{ width:300px; height:200px;}
.pic_box .pic_box_left ul{ list-style:none;}
.pic_box .pic_box_rig{ float:right}
.pic_box .pic_box_rig img{ width:200px; height:50px;}
.pic_box .pic_box_rig ul{ list-style:none; width:204px; height:200px;}
.pic_box .pic_box_rig li{ margin-bottom:8px; border:2px #CCCCCC solid;}
.pic_box .pic_box_rig li.on{border:2px #FF6600 solid;}
</style>

<div class="pic_box">
  <div class="pic_box_left">
    <ul>
      <li style="display:block"><img src="img/1.jpg" /></li>
      <li style="display:none"><img src="img/2.jpg" /></li>
      <li style="display:none"><img src="img/3.jpg" /></li>
    </ul>
  </div>
  <div class="pic_box_rig">
    <ul>
      <li class="on"><img src="img/1.jpg" /></li>
      <li><img src="img/2.jpg" /></li>
      <li><img src="img/3.jpg" /></li>
    </ul>
  </div>
</div>

<script language="javascript">
$(document).ready(function(){
var len=$(".pic_box_rig>ul>li").length;
var adtime;
var index=0;
   $(".pic_box_rig li").click(function(){
   index=$(".pic_box_rig li").index(this);
   showpic(index);
   });

   $(".pic_box_rig").hover(function(){
   clearInterval(adtime);
   },function(){
      adtime=setInterval(function(){
      showpic(index);
      index++;
      if (index == len) {       //最后一张图片之后，转到第一张
                index = 0;
            }
      },3000);
   
   }).trigger("mouseleave");

function showpic(index){
   $(".pic_box_left li").attr("style","display:none");
   $(".pic_box_left li").eq(index).attr("style","display:block");
   $(".pic_box_rig li").removeClass("on").eq(index).addClass("on");
};

});
</script>