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="http://files.glzy8.com/upload/image/2007-11-17_17-30-42.jpg" width="568" height="228"></li>

　　<li><img src="http://files.glzy8.com/upload/image/4bb7eaf902000mnl.jpg" width="568" height="228"></li>

　　<li><img src="http://files.glzy8.com/upload/image/Products/2007-11-16_22-11-15.jpg" width="568" height="228"></li>

　　<li></li>

　　</ul>

　　</div>