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