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
时间： 2024-09-27 23:33:50