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下载：点击下载
posted @ 2017-02-16 17:07  林育松  阅读(131)  评论(0)    收藏  举报