以前用JS实现的：http://www.cnblogs.com/xuyiqing/p/8373064.html

这里利用jQuery实现，并且做得更完善：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

        <script>

            $(function() {

                //1.书写显示广告图片的定时操作

                time = setInterval("showAd()", 2000);

            });

            //2.书写显示广告图片的函数（各种效果）

            function showAd() {

                //3.获取广告图片，并让其显示

                //$("#img2").show(1000);

                //这里是1秒内弹入图片

                $("#img2").slideDown(1000);

                //这里是1秒内滑入图片（自上到下）

                //$("#img2").fadeIn(4000);

                //这里是4秒内图片逐渐显示（淡入）

                //4.清除显示图片定时操作

                clearInterval(time);

                //5.设置隐藏图片的定时操作

                time = setInterval("hiddenAd()", 2000);

            }

            function hiddenAd() {

                //6.获取广告图片，并让其隐藏（也有多种效果）

                //$("#img2").hide(6000);

                //这里是图片6秒内弹出

                $("#img2").fadeOut(6000);

                //这里是6秒内图片淡出

                //7.清除隐藏图片的定时操作

                clearInterval(time);

            }

        </script>

    </head>

    <body>

        <div>

            <img src="img/1.jpg" width="100%" style="display: none" id="img2" />

        </div>

    </body>

</html>

多种特效，后面的参数是毫秒值：

还有一种方式是toggle，这里单独介绍：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>toggle的使用</title>

        <style>

            div {

                border: 1px solid white;

                width: 500px;

                height: 350px;

                margin: auto;

                text-align: center;

            }

        </style>

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

        <script>

            $(function() {

                $("#btn").click(function() {

                    $("#img1").toggle();

                    //改变显示状态

                    //隐藏则变成显示，显示的变成隐藏状态

                });

            });

        </script>

    </head>

    <body>

        <div>

            <input type="button" value="显示/隐藏" id="btn" /><br />

            <img src="img/1.jpg" width="100%" height="100%" id="img1" />

        </div>

    </body>

</html>

这里可以理解为：display:none的修改为block，display:block的修改为none

jQuery应用实例1：定时弹出图片的更多相关文章

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

    <script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...

  2. JS应用实例3：定时弹出广告

    在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...

  3. jQuery学习(二)——使用JQ完成页面定时弹出广告

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...

  4. 使用JS完成首页定时弹出广告图片

    一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none        定时操作: setInterval(“显示图片的函数”, 3000); 三.代 ...

  5. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  8. jQuery Colorbox是一款弹出层

    jQuery Colorbox使用教程 jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancy ...

  9. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

随机推荐

  1. Python程序互斥体

    Python程序互斥体   有时候我们需要程序只运行一个实例,在windows平台下我们可以很简单的用mutex实现这个目的.   在开始时,程序创建了一个命名的mutex,这个mutex可以被其他进 ...

  2. oracle sql developer怎么创建用户

    学习数据库的时候,用管理员账户,会有会有很多系统自创的表,很麻烦.所以要自己创建普通用户. create user 用户名 identified by 密码;--创建用户 grant connect, ...

  3. linux下安装haproxy作为端口转发服务器，以及安装keepalived作为haproxy高可用方案

    一.安装haproxy作为端口转发服务器(主服务器:172.28.5.4,备服务器:172.28.5.8,浮点IP为:172.28.5.6) 1.安装依赖包 yum -y install wget g ...

  4. Java方法区（Method Area）

    方法区与Java堆一样,是各个线程共享的内存区域,他在与存储已被虚拟机加载的类信息,常量,静态变量,即时编译器编译后的代码等数据,虽然Java虚拟机规范把方法区描述为堆得一个逻辑部分,但是他却有一个别 ...

  5. sql存储过程进行条件筛选

    1.创建临时表,把存储过程结果集保存到临时表,对临时表进行筛选. Create Table #TmpTable(FieldList) Insert Into #TmpTable Exec StoreP ...

  6. 49-Python 安装pythoncom库和pyHook

    这个直接用pip不行,所以借鉴了别人的方法: YTouchCoder 1. https://sourceforge.net/projects/pywin32/files/pywin32/ 这里面下载p ...

  7. Entity Framework - PostgresQL CodeFirst

    经过几年的更新及业界对Entity Framework 的认同. 现在 EF 可以支持的数据库越来越多了.而PostgresQL 数据库现在也可以使用code first的方式来创建数据库了. 不多说 ...

  8. 三、putty工具常见设置

    转载自:https://www.cnblogs.com/hdk1993/p/4769072.html Putty是一个免费小巧的Win32平台下的telnet,rlogin和ssh客户端. 它的主程序 ...

  9. RFC

    一.简介   二.常用 1)TLSv1.2 Protocol https://tools.ietf.org/html/rfc5246

  10. Pandas处理丢失数据

    1.创建含NaN的矩阵 >>> dates = pd.date_range(', periods=6) >>> df = pd.DataFrame(np.arang ...