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