jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码 V1.0

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

 

posted @ 2016-09-27 14:16  林育松  阅读(202)  评论(0)  编辑  收藏  举报