html主题代码
<!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>jquery实现可展开收缩的首页大图广告展示方式</title> <script type="text/javascript" src="js/jquery.js"></script> <link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="advbox"> <div class="dt_small" style="display:none;"> <div class="dt_toBig" style="display:none;"></div> <a href="#" target="_blank"><img src="images/1325.jpg" width="990" height="60" alt="广告图片缩略图" /></a> </div> <div class="dt_big"> <div class="dt_toSmall"></div> <a href="#" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="990" height="500" alt="广告图片大图" /></a> </div> </div> <script type="text/javascript"> function AdvClick(){ var a=1500; var b=3*1000; $(".dt_toSmall").click(function(){ $(".dt_small").delay(a).slideDown(a); $(".dt_big").stop().slideUp(a); $(".dt_toSmall").stop().fadeOut(0); $(".dt_toBig").delay(a*2).fadeIn(0) });$ (".dt_toBig").click(function(){ $(".dt_big").delay(a).slideDown(a); $(".dt_small").stop().slideUp(a); $(".dt_toBig").stop().fadeOut(0); $(".dt_toSmall").delay(a*2).fadeIn(0) }) } function AdvAuto(){ if($(".dt_big").length>0){ var a=1500; var b=3*1000; $(".dt_big").delay(b).slideUp(a,function(){ $(".dt_small").slideDown(a); $(".dt_toBig").delay(a).fadeIn(0) }); $(".dt_toSmall").delay(b).fadeOut(0) } } </script> <script type="text/javascript"> $(document).ready(function(){ AdvClick(); }); //顶部通览可展开收起效果 if($("#actionimg").length>0){ $("#actionimg").onload=AdvAuto(); } </script> </body> </html>
lanrenzhijia.css代码为：（注：加了这个css，关闭和重播会显示出来，不加则没有显示，没加的话图片没有居中，则要加 style="text-align: center;"，图片方能居中）
@charset "utf-8"; /* 代码整理：建站基地 */ * { margin:0; padding:0; list-style-type:none; } a, img { border:0; } .advbox { width:990px; margin:0 auto; } .advbox .dt_small { width:990px; } .advbox .dt_big { width:990px; } .advbox .dt_toBig { position:absolute; left:50%; margin:5px 0px 0px 440px; width:49px; height:21px; background:url("../images/public_showTL_1201.png"); cursor:pointer; } .advbox .dt_toSmall { position:absolute; left:50%; margin:5px 0px 0px 440px; width:49px; height:21px; background:url("../images/public_closeTL_1201.png"); cursor:pointer; }
jquery.js下载：点击下载
转载于：建站基地_www.jz21.net http://www.jz21.net/JS/Advertising/22832.html