代码写的很简单 可以随便改动: 代码: <!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> <title>Round Images</title> <mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript" src="jQuery.timers.js" mce_src="jQuery.timers.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ var imgobj = $("#pic li a img"); var img0 = imgobj[0].src; var text0 = imgobj[0].title; var imgIndex = 0; $("#text").html(text0); var numul = ""; for(var i=0;i<imgobj.length;i++) { if(i==0) { numul +="<li class='on' alt="+i+"><img width='30px' height='30px' src="+imgobj[i].src+" mce_src="+imgobj[i].src+"/></li>"; } else { numul +="<li alt="+i+"><img width='30px' height='30px' src="+imgobj[i].src+" mce_src="+imgobj[i].src+"/></li>"; } } $("#num").html(numul); var numobj = $("#num li"); $("#num li").click(function() { var liobj = $(this); var rvalue=($(this).attr("alt")); $("#num li").removeClass(); liobj.addClass("on"); changeImg(rvalue); imgIndex = rvalue; $(document).stopTime(); $(document).everyTime(3000, every); }); $(this).everyTime(3000, every); function changeImg(index) { if(index == 0) { $(imgobj[0]).attr({src:img0,title:text0}).css({opacity: 0.1}).animate({opacity: 1.0},1000); } else { $(imgobj[0]).attr({src:$(imgobj[index]).attr("src"),title:$(imgobj[index]).attr("title")}).css({opacity: 0.1}).animate({opacity: 1.0},1000); } $("#text").html($(imgobj[0]).attr("title")); } function every() { imgIndex = (imgIndex+1)%imgobj.length; numobj.removeClass(); $(numobj[imgIndex]).addClass("on"); changeImg(imgIndex); } }); // --></mce:script> <mce:style type="text/css"><!-- * { margin:0; padding:0; } img,img a { border:0; } body { height:900px; border:1px red solid; } .focus { width:400px; height:360px; position:relative; border:1px solid #D8D9DA; } /*标题*/ .newindex_flash_bt { width:100%; height:35px; position:absolute; bottom:0px; left:0px; background:#000; -moz-opacity:0.5; filter:alpha(opacity=50); z-index:1; } /*广告*/ .newindex_flash_btfont { width:90%; height:35px; position:absolute; bottom:0px; left:10px; z-index:2; color:#fff; padding:0px 30px 0px 50px; background:url(../images/foc.gif) no-repeat 0px 10px; line-height:33px; font-weight:bold; } .newindex_flash_btfont a { color:#fff; } .newindex_flash_btfont a:visited { color:#fff; } .newindex_flash_btfont span { margin-left:15px; } .pic img { width:400px; height:360px; } .container { border:0px solid #333; } .container img { border:0; } .bottom { position:absolute; bottom:0px; width:400px; filter: Alpha(Opacity=60); opacity: 1; background-color:#000; height:42px; line-height:30px; } .text { float:left; padding-left:5px; font-size:14px; color:#fff !important } .num { float:right; padding-right:5px; margin:5px; } .num li { float:left; list-style:none; color: #fff; text-align: center; line-height: 16px; width: 36px; height: 30px; font-family: Arial; font-size: 12px; cursor: pointer; margin:1px; border: 1px solid #707070; background-color: #000; } .num li.on { line-height: 18px; width: 38px; height: 30px; font-size: 14px; border: 0; font-weight: bold; } .pic { width:400px; height:360px; overflow:hidden; } .pic li { list-style:none; } --></mce:style><style type="text/css" mce_bogus="1"> * { margin:0; padding:0; } img,img a { border:0; } body { height:900px; border:1px red solid; } .focus { width:400px; height:360px; position:relative; border:1px solid #D8D9DA; } /*标题*/ .newindex_flash_bt { width:100%; height:35px; position:absolute; bottom:0px; left:0px; background:#000; -moz-opacity:0.5; filter:alpha(opacity=50); z-index:1; } /*广告*/ .newindex_flash_btfont { width:90%; height:35px; position:absolute; bottom:0px; left:10px; z-index:2; color:#fff; padding:0px 30px 0px 50px; background:url(../images/foc.gif) no-repeat 0px 10px; line-height:33px; font-weight:bold; } .newindex_flash_btfont a { color:#fff; } .newindex_flash_btfont a:visited { color:#fff; } .newindex_flash_btfont span { margin-left:15px; } .pic img { width:400px; height:360px; } .container { border:0px solid #333; } .container img { border:0; } .bottom { position:absolute; bottom:0px; width:400px; filter: Alpha(Opacity=60); opacity: 1; background-color:#000; height:42px; line-height:30px; } .text { float:left; padding-left:5px; font-size:14px; color:#fff !important } .num { float:right; padding-right:5px; margin:5px; } .num li { float:left; list-style:none; color: #fff; text-align: center; line-height: 16px; width: 36px; height: 30px; font-family: Arial; font-size: 12px; cursor: pointer; margin:1px; border: 1px solid #707070; background-color: #000; } .num li.on { line-height: 18px; width: 38px; height: 30px; font-size: 14px; border: 0; font-weight: bold; } .pic { width:400px; height:360px; overflow:hidden; } .pic li { list-style:none; } </style> </head> <body> <div class="focus" style="left:200px;top:100px;"> <div class="container" id="idContainer2"> <ul class="pic" id="pic"> <li> <a href="http://www.g.cn" mce_href="http://www.g.cn" target="_blank"> <img src="images/1.jpg" mce_src="images/1.jpg" alt="图片1" width="400px" height="360px" title="图片1" /> </a> </li> <li> <a href="http://www.163.com" mce_href="http://www.163.com" target="_blank"> <img src="images/2.jpg" mce_src="images/2.jpg" alt="图片2" width="400px" height="360px" title="图片2" /> </a> </li> <li> <a href="http://www.sina.com" mce_href="http://www.sina.com" target="_blank"> <img src="images/3.jpg" mce_src="images/3.jpg" alt="图片3" width="400px" height="360px" title="图片3" /> </a> </li> <li> <a href="http://www.baidu.com" mce_href="http://www.baidu.com" target="_blank"> <img src="images/4.jpg" mce_src="images/4.jpg" alt="图片4" width="400px" height="360px" title="图片4" /> </a> </li> <li> <a href="http://www.51aspx.com" mce_href="http://www.51aspx.com" target="_blank"> <img src="images/5.jpg" mce_src="images/5.jpg" alt="图片5" width="400px" height="360px" title="图片5" /> </a> </li> <li> <a href="http://www.caidao8.com" mce_href="http://www.caidao8.com" target="_blank"> <img src="images/6.jpg" mce_src="images/6.jpg" alt="图片6" width="400px" height="360px" title="图片6" /> </a> </li> </ul> <div class="bottom"> <div class="text" id="text"></div> <ul class="num" id="num"> </ul> <div style="clear:both;" mce_style="clear:both;"></div> </div> </div> </div> </body> </html> 兼容 ff ie6 测试通过!