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

$(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();

*{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;

}