广告定时弹出定时关闭
博客专区 > Lucky_Me 的博客 > 博客详情
广告定时弹出定时关闭
Lucky_Me 发表于3个月前
广告定时弹出定时关闭
  • 发表于 3个月前
  • 阅读 15
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 定时弹出广告 定时关闭

1.效果

2.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时广告</title>
        <script src="../js/jquery-3.2.1.js"></script>
        <script>
            //1.定义时间变量
            var time;
            //2.启动定时器
            $(function(){
                time =    setInterval("showAd()",3000);
            })
            //3.展示广告方法
            function showAd(){
                //3.1得到div标签  并且显示
                $("#Ad").slideDown(2000);
                //3.2清除定时器
                clearInterval(time);
                //3.3 调用隐藏div的方法
                time = setInterval("hideAd()",4000);
            }
            //4.隐藏方法
            function hideAd(){
                $("#Ad").slideUp(2000);
                clearInterval(time);
                $("#Ad2").hide();//将文字也隐藏了
            }
        </script>
    </head>
    <body>
        <div>
            <p id="Ad2">广告3s后弹出</p>
        </div>
        <div id="Ad" style="display: none;">
            <img src="../img/4.png" />
        </div>
    </body>
</html>
3.注意事项

(1)引入 js库

(2)开始隐藏要照片

(3)注意照片的加载位置

 

共有 人打赏支持
粉丝 5
博文 67
码字总数 22433
×
Lucky_Me
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: