代码比较简单，可操作性较强，可以自己组合。主要使用的是jquery的自有功能实现，我把代码贴出来，有空的可以参考1下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* {font-family: "Lucida Grande" , "微软雅黑" , "宋体" , "黑体" , "幼圆" , "隶书" , "华文行楷", Verdana, Lucida, Arial, Helvetica, sans-serif;}
body {
font-size:12px;
border:0px;
font-variant: normal;
color: #bcbcbc;
text-decoration: none;
margin: 0px;
padding: 0px;
background-color: #fff;
width:100%;
}
ul,li,ol,dl,dt,dd,form{padding:0px;margin:0px;}
li{ list-style:none}
form,img { border:none;}
.left{ float:left;}
.right{ float:right}
.clear{ clear:both}
.buttons li a {width:100px;height:50px; background:#069; display:block}
.buttons li a:hover{ background:#CCC}
.buttons li a.mouseover{background:#CCC} /* 定义鼠标移上的效果*/
</style>
<script type="text/javascript">
//焦点图功能
$(function(){
var ad_img = $("#imgs"); //定义幻灯图片组的id，可以根据实际情况修改
var ad_button = $("#buttons"); //定义幻灯按钮组的id，可以根据实际情况修改
var ad_imgs = ad_img.find("li"); //图片组的li集合
var ad_buttons = ad_button.find("li") //按钮组的li集合
var ad_mouseoverCls="mouseover" //定义鼠标移上的class的名称，可以根据实际情况修改
ad_imgs.hide() //默认将图片组隐藏
ad_imgs.eq(0).show() //默认将第1张图片显示
var ad_i = 1; //计数器，默认从第2张图片开始淡入
ad_buttons.mouseover(function(){
ad_i = ad_buttons.index(this); //鼠标移上的是第几个
ad_imgs.hide()
ieFilter(ad_imgs[ad_i]); //执行滤镜
ad_imgs.eq(ad_i).show(); //将对应的图片显示
ad_buttons.find("a").removeClass(ad_mouseoverCls);
ad_buttons.eq(ad_i).find("a").addClass(ad_mouseoverCls);
})
//如果是ie浏览器则执行滤镜
var ieFilter = function(o){
if($.browser.msie){
$(o).css("filter","progid:DXImageTransform.Microsoft.RevealTrans(Duration=1, Transition=23)") //设置滤镜
o.filters[0].apply();
o.filters[0]. transition=23; //每次出现不同样式
o.filters[0].play();
}
}
var ad_autoMarquee = function(){
if(ad_i<ad_imgs.length){
ad_imgs.hide()
ieFilter(ad_imgs[ad_i]); //执行滤镜
ad_imgs.eq(ad_i).show(); //将对应的图片显示
ad_buttons.find("a").removeClass(ad_mouseoverCls);
ad_buttons.eq(ad_i).find("a").addClass(ad_mouseoverCls);
ad_i++; //将计数器增1
}else{
ad_i=0; //重置计数器
}
}
var focusAd = setInterval(ad_autoMarquee,3000)
})
</script>
</head>
<body>
<div >
<div id="imgs">
<ul>
<li><img src="Chrysanthemum.jpg" /></li>
<li><img src="Desert.jpg" /></li>
<li><img src="Hydrangeas.jpg" /></li>
</ul>
</div>
<div class="right buttons" id="buttons">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<h1><a href="http://zhuoyue.me">卓越.Me</a></h1>
</body>
</html>
你也可以看1下在线演示的效果：http://demo.zhuoyue.me/js/Ad/zi-ji-bian-xie-de-jian-dan-yi-dong-de-huan-deng/
当然你可以把源代码和图片下载下来：自己编写的简单易懂实用的广告幻灯代码
