js jquery做的图片连续滚动代码

核心代码如下，大家可以参考

<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="/upload/image/2007-11-17_17-30-42.jpg" width="568" height="228"></li>  
                            <li><img src="/upload/image/4bb7eaf902000mnl.jpg" width="568" height="228"></li>  
                            <li><img src="/upload/image/Products/2007-11-16_22-11-15.jpg" width="568" height="228"></li>  
                            <li></li>  
   </ul>  
</div>