JQuery常用的方法来制作广告条的定时出现与隐藏

最新推荐文章于 2019-05-24 22:15:29 发布

Steadyliu

最新推荐文章于 2019-05-24 22:15:29 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JQuery 广告条效果显示

本文链接：https://blog.youkuaiyun.com/weixin_29414291/article/details/80039165

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用JQuery实现广告条的定时显示与隐藏动画效果，包括使用show、hide、fadeIn、fadeOut等方法，并结合定时器实现动画切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚接触前端，想要学习下JQuery入门。利用JQ的常用方法来实现广告条的出现与消失需要配合定时函数进行,首先要引入JQuery.js文件或者用cdn镜像。

一·JQuery常用的效果函数

show() 显示函数
hide（）隐藏函数
fadeIn() 渐变消失
fadeOut()渐变出现
slideUp()向上滑动消失
slideDown()向下滑动出现
这些函数使用的用法很相似，以下主要讲解show方法的几种用法：
显示隐藏的匹配元素。

这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

fn:在动画完成时执行的函数，每个元素执行一次。
（1）show（）直接显示出来
（2）show（毫秒值）用时毫秒才显示出来
（3）show（“fast“）可以取值slow fast normal
（4）show（毫秒值，fn):用时多少毫秒之后，显示出来后执行fn函数。

二.广告条显示隐藏的分析过程

1、在html中有个div元素，进行对广告条进行放置

<div id="ad" >
    <img src ="../img/1.jpeg"/>
</div>

2、在style样式中设置display属性为none

<style>
    #ad{ display:none}
</style>

3、设置定时器进行5秒调用显示id=”ad”的div

<script>
    var time ;
            $(function(){
                //设置定时器5秒后执行函数
            time =  setInterval("showAd()",5000);//方法名需要加上括号才行

            });
            function showAd () {
//              $("#ad").show("fast");
//              $("#ad").slideDown(2000);//用时两秒向下滑动出现
                $("#ad").fadeIn(2000);//淡入的出现
                clearInterval(time);
                //再设置定时5秒钟进行广告的隐藏
            time =  setInterval("hideAd()",5000);
            }
</script>

4、需要设置隐藏函数

            function hideAd () {
//              $("#ad").hide("fast");
//              $("#ad").slideUp(2000);//用时两秒向上滑动消失
                $("#ad").fadeOut(2000);//淡出消失
                //清除定时
                clearInterval(time);
            }

记住清除定时任务

完整的Html如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时弹出广告</title>
    <!--
        作者：ahhflkl@126.com
        时间：2018-04-22
        描述：
        /*
         * 1.创建一个html页面
           2.页面中创建一个div广告不分，并设置div的display属性为none
           3.设置定时操作，5秒钟执行一个显示的方法
           4.再设置一个定时操作，显示五秒之后进行银行操作
         */
    --> 
        <style>
            #index{width: 100%;height: 400px;background-color: green;}
            #ad{ display: none; width: 100%; height: 400px;}
            #img{height: 400px; width: 100%;}
        </style>
        <script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
        <script>
            var time ;
            $(function(){
                //设置定时器5秒后执行函数
            time =  setInterval("showAd()",5000);//方法名需要加上括号才行

            });
            function showAd () {
//              $("#ad").show("fast");
                $("#ad").slideDown(2000);//用时两秒向下滑动出现
//              $("#ad").fadeIn(2000);//淡入的出现
                clearInterval(time);
                //再设置定时5秒钟进行广告的隐藏
            time =  setInterval("hideAd()",5000);
            }
            function hideAd () {
//              $("#ad").hide("fast");
                $("#ad").slideUp(2000);//用时两秒向上滑动消失
//              $("#ad").fadeOut(2000);//淡出消失
                //清除定时
                clearInterval(time);
            }

        </script>
    </head>
    <body>
        <div id="ad"><img id="img" src="img/1.jpeg"/></div>
        <div id="index">首页</div>
    </body>
</html>