核心代码如下，大家可以参考
复制代码 代码如下:
<scriptsrc="/js/jquery.js"></script>
<script>
$(document).ready(function(){
$(".bannerbuttonli").each(
function(){
$(this).click(
function(){
bannerGo($(this).attr("num"));
}
)
}
)
$(".imgli:last").html($(".imgli:first").html());
});
varactive=1;//当前显示第1个
varpicNum=4;//4个图转换
vartime=500;//移动速度
varintTime=3000;//自动转换间隔时间
varwidth=568;//图片宽
varperDistance=57;//每次移动距离
vartagObj=0;
varmarquee;
varautoMarquee;
vardistance;
vartmpDistance=0;
varlistLeft=0;
vartagLeft=0;
varmove=false;
functionbannerGo(tag){
if(active!=tag){
if(!move){
listLeft=parseInt($(".bannerul.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;
}
}
}
functionMarquee(t){
varx=false;
if(t==0){
listLeft=listLeft+perDistance;
if((tagLeft-listLeft)>=perDistance){
$(".bannerul.img").css("left",listLeft+"px");
}else{
$(".bannerul.img").css("left",tagLeft+"px");
x=true;
}
}else{
listLeft=listLeft-perDistance;
if((tagLeft-listLeft)<=perDistance){
$(".bannerul.img").css("left",listLeft+"px");
}else{
$(".bannerul.img").css("left",tagLeft+"px");
x=true;
}
}
if(x){
clearInterval(marquee);
tmpDistance=0;
listLeft=0;
tagLeft=0;
move=false;
$(".bannerbuttonli").css("background","url(/images/index/b2.gif)no-repeat");
$(".bannerbuttonli[@num="+active+"]").css("background","url(/images/index/b1.gif)no-repeat");
if(tagObj==picNum+1){
$(".bannerul.img").css("left","0");
active=1;
}
}
}
functionautoMarquee(){
tagObj=Number(active)+1;
bannerGo(tagObj);
}
functionautoMarqueeStart(){
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;}
.bannerbuttonli{
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.imgli{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>
<divclass="banner">
<ulclass="bannerbutton"style="position:absolute;z-index:2;top:200px;;left:10px;">
<linum=1style="background:url(/images/index/b2.gif);">1</li>
<linum=2>2</li>
<linum=3>3</li>
<linum=4>4</li>
</ul>
<ulclass="img"style="left:0px;">
<li><imgsrc="/images/temp/bn1.jpg"width="568"height="228"></li>
<li><imgsrc="http://files.jb51.net/upload/image/2007-11-17_17-30-42.jpg"width="568"height="228"></li>
<li><imgsrc="http://files.jb51.net/upload/image/4bb7eaf902000mnl.jpg"width="568"height="228"></li>
<li><imgsrc="http://files.jb51.net/upload/image/Products/2007-11-16_22-11-15.jpg"width="568"height="228"></li>
<li></li>
</ul>
</div>