<script src="/js/jquery.js"></script>  <script>  $(document).ready(function(){         $(".bannerbutton li").each(                       function(){                              $(this).click(                                     function(){                                            bannerGo($(this).attr("num"));                                     }                              )                       }                )         $(".img li:last").html($(".img li:first").html());  });  var active=1;//当前显示第1个  var picNum=4;//4个图转换  var time=500;//移动速度  var intTime=3000;//自动转换间隔时间  var width=568; //图片宽  var perDistance=57;//每次移动距离  var tagObj=0;  var marquee;  var autoMarquee;  var distance;  var tmpDistance=0;  var listLeft=0;  var tagLeft=0;  var move=false;  function bannerGo(tag){         if(active != tag){                if(!move){                listLeft=parseInt($(".banner ul.img").css("left"));                distance=(tag-active)*width;                tmpDistance=0;                perTime=parseInt(time*perDistance/distance);                if(tag>active){                       tagLeft=listLeft-distance;                       marquee=setInterval("Marquee(1)",perTime)                }else{                       tagLeft=listLeft-distance;                       marquee=setInterval("Marquee(0)",perTime)                }                active=Number(tag);                if(active==picNum+1)                       active=1;                move=true;                }         }  }  function Marquee(t){         var x=false;         if(t==0){                listLeft=listLeft+perDistance;                if((tagLeft-listLeft)>=perDistance){                       $(".banner ul.img").css("left",listLeft+"px");                }else{                       $(".banner ul.img").css("left",tagLeft+"px");                       x=true;                }         }else{                listLeft=listLeft-perDistance;                if((tagLeft-listLeft)<=perDistance){                       $(".banner ul.img").css("left",listLeft+"px");                }else{                       $(".banner ul.img").css("left",tagLeft+"px");                       x=true;                }         }         if(x){                clearInterval(marquee);                tmpDistance=0;                listLeft=0;                tagLeft=0;                move=false;                $(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat");                $(".bannerbutton li[@num="+active+"]").css("background","url(/images/index/b1.gif) no-repeat");                if(tagObj==picNum+1){                $(".banner ul.img").css("left","0");                active=1;                }         }  }  function autoMarquee(){         tagObj=Number(active)+1;         bannerGo(tagObj);  }  function autoMarqueeStart(){         if(!move){         marquee=setInterval("autoMarquee()",intTime)         }else{         setTimeout("autoMarqueeStart()",time);         }  }  autoMarqueeStart();  </script>  <style>  *{margin:0;padding:0;border:0}  li{float:left;}  ul{list-style-type:none;}  .banner{height:228px;width:568px;overflow:hidden;}  .bannerbutton li{         width:23px;         height:22px;         background:url(/images/index/b2.gif) no-repeat;         cursor:pointer;         line-height:22px;         text-align: center;         color: #fff;         font-weight: bold;  }  .banner .img li{float:left;}  .banner .img {         position: relative;width:5600px;  }  body,td,th {         font-size: 12px;  }  body {         margin-left: 0px;         margin-top: 0px;         margin-right: 0px;         margin-bottom: 0px;  }  </style>  <div class="banner">          <ul class="bannerbutton" style="position:absolute;z-index:2;top:200px;;left:10px;">                                     <li num=1 style="background:url(/images/index/b2.gif);">1</li>                                     <li num=2>2</li>                                     <li num=3>3</li>                                     <li num=4>4</li>         </ul>    <ul class="img" style="left:0px;">                              <li><img src="/images/temp/bn1.jpg" width="568" height="228"></li>                              <li><img src="http://files.jb51.net/upload/image/2007-11-17_17-30-42.jpg" width="568" height="228"></li>                              <li><img src="http://files.jb51.net/upload/image/4bb7eaf902000mnl.jpg" width="568" height="228"></li>                              <li><img src="http://files.jb51.net/upload/image/Products/2007-11-16_22-11-15.jpg" width="568" height="228"></li>                              <li></li>     </ul>  </div>