使用jquery完成定时弹出广告图片

Posted 2020-11-17 benjamin77

        <script src="../js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //1.书写显示广告的定时操作
                time=setInterval("showAdd()",3000);
            });
            //2.书写显示广告图片的函数
            function showAdd(){
                //3.获取广告图片,并让其显示
//                $("#img2").show(1000); //普通弹出
//                $("#img2").slideDown(5000);//向下滑动
                $("#img2").fadeIn(5000);
                //4.清楚显示图片的定时操作
                clearInterval(time);
                //5.设置隐藏图片的定时操作
                time=setInterval("hiddenAd()",3000);
            }
                function hiddenAd(){
                    //6.获取广告图片，并让其隐藏
//                    $("#img2").hide(); //普通隐藏
//                    $("#img2").slideUp(5000);//向上慢慢隐藏
                    $("#img2").fadeOut(5000);
                    //7.清楚隐藏图片的定时操作
                    clearInterval(time);
                }
        </script>

 

 

    <!--定时弹出广告图片位置-->
            <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" 
                style="display:none" id="img2"/>