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

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

复制代码 代码如下:

<script></script> 
<script> <BR>$(document).ready(function(){ <br><br> $(".bannerbutton li").each( <BR> function(){ <BR> $(this).click( <BR> function(){ <BR> bannerGo($(this).attr("num")); <BR> } <BR> ) <BR> } <BR> ) <BR> $(".img li:last").html($(".img li:first").html()); <BR>}); <BR>var active=1;//当前显示第1个 <BR>var picNum=4;//4个图转换 <BR>var time=500;//移动速度 <BR>var intTime=3000;//自动转换间隔时间 <BR>var width=568; //图片宽 <BR>var perDistance=57;//每次移动距离 <BR>var tagObj=0; <BR>var marquee; <BR>var autoMarquee; <BR>var distance; <BR>var tmpDistance=0; <BR>var listLeft=0; <BR>var tagLeft=0; <BR>var move=false; <br><br><br><br>function bannerGo(tag){ <BR> if(active != tag){ <BR> if(!move){ <BR> listLeft=parseInt($(".banner ul.img").css("left")); <BR> distance=(tag-active)*width; <BR> tmpDistance=0; <BR> perTime=parseInt(time*perDistance/distance); <BR> if(tag>active){ <BR> tagLeft=listLeft-distance; <BR> marquee=setInterval("Marquee(1)",perTime) <BR> }else{ <BR> tagLeft=listLeft-distance; <BR> marquee=setInterval("Marquee(0)",perTime) <BR> } <BR> active=Number(tag); <BR> if(active==picNum+1) <BR> active=1; <BR> move=true; <BR> } <BR> } <BR>} <br><br>function Marquee(t){ <BR> var x=false; <BR> if(t==0){ <BR> listLeft=listLeft+perDistance; <BR> if((tagLeft-listLeft)>=perDistance){ <BR> $(".banner ul.img").css("left",listLeft+"px"); <BR> }else{ <BR> $(".banner ul.img").css("left",tagLeft+"px"); <BR> x=true; <BR> } <BR> }else{ <BR> listLeft=listLeft-perDistance; <BR> if((tagLeft-listLeft)<=perDistance){ <BR> $(".banner ul.img").css("left",listLeft+"px"); <BR> }else{ <BR> $(".banner ul.img").css("left",tagLeft+"px"); <BR> x=true; <BR> } <BR> } <BR> if(x){ <BR> clearInterval(marquee); <BR> tmpDistance=0; <BR> listLeft=0; <BR> tagLeft=0; <BR> move=false; <BR> $(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat"); <BR> $(".bannerbutton li[@num="+active+"]").css("background","url(/images/index/b1.gif) no-repeat"); <BR> if(tagObj==picNum+1){ <BR> $(".banner ul.img").css("left","0"); <BR> active=1; <BR> } <BR> } <BR>} <br><br>function autoMarquee(){ <BR> tagObj=Number(active)+1; <BR> bannerGo(tagObj); <BR>} <br><br>function autoMarqueeStart(){ <BR> if(!move){ <BR> marquee=setInterval("autoMarquee()",intTime) <BR> }else{ <BR> setTimeout("autoMarqueeStart()",time); <BR> } <br><br>} <BR>autoMarqueeStart(); <BR></script> 
 

 
        

 
                                   
• 1
 
                                   
• 2
 
                                   
• 3
 
                                   
• 4
 
       

 
  

 
                            
 
                            
 
                            
 
                            
 
                            
•