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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V2.0相关的知识,希望对你有一定的参考价值。

把代码做成js网站进行统一调用

if (typeof jQuery == ‘undefined‘) {
 document.writeln(‘<script type="text/javascript" src="../jquery.js"></script>‘); }
else {
// jQuery 已加载
}

//泰山压顶主要js代码
document.writeln(‘<script type="text/javascript" src="../top.js"></script>‘);    
top.js代码为:
document.writeln(‘<div class="advbox" style="text-align: center;">‘);
document.writeln(‘<div class="dt_small" style="display:none;">‘);
document.writeln(‘<div class="dt_toBig" style="display:none;"></div>‘);
document.writeln(‘<a href="#" target="_blank"><img src="../images/Small.jpg" width="984" height="130" alt="图片缩略图" /></a> </div>‘);
document.writeln(‘<div class="dt_big">‘);
document.writeln(‘<div class="dt_toSmall"></div>‘);
document.writeln(‘<a href="#" target="_blank"><img id="actionimg" src="../images/big.jpg" width="986" height="283" alt="图片大图" /></a> </div>‘);
document.writeln(‘</div>‘);


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)
    }
}


$(document).ready(function(){
    AdvClick();
});


//顶部通览可展开收起效果
if($("#actionimg").length>0){    
    $("#actionimg").onload=AdvAuto();
}

 

以上是关于jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V2.0的主要内容,如果未能解决你的问题,请参考以下文章

如何用jquery实现点击展开收缩效果

怎么用jquery实现文字左右展开收缩效果

jquery 怎么实现展开和收起按钮之间的切换

jquery 怎么实现展开和收起按钮之间的切换

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

Axure中继器实现子表的展开和收缩(载入时展开子表)