以前用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. MySQL中的重做日志（redo log），回滚日志（undo log），以及二进制日志（binlog）的简单总结

    MySQL中有六种日志文件,分别是:重做日志(redo log).回滚日志(undo log).二进制日志(binlog).错误日志(errorlog).慢查询日志(slow query log).一 ...

  2. 【转】vMAN 和 PVID

    vMAN关的情况下,如果用户的包内带有VLAN TAG,则以用户的TAG为准,如果用户的包内不带VLAN TAG,就打上PVID:vMAN开的情况下,无论用户的包内是否带有VLAN TAG,都强制在外 ...

  3. 转：centos查看实时网络带宽占用情况方法

    Linux中查看网卡流量工具有iptraf.iftop以及nethogs等,iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等. centos安装iftop的命令如下: ...

  4. java_19List 集合

    1List集合 有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元素. 与 s ...

  5. 未渲染的dom结构，绑定事件，jquery

    使用事件委托 $(document).on('click','selector',function(){ ... }); 示例 $(document).on("click", &q ...

  6. 解决 ora-28001 密码过期的处理办法

    转载自:https://blog.csdn.net/pengyouchuan/article/details/12905623 操作步骤: $sqlplus / as sysdba ALTER PRO ...

  7. vue.$nextTick 解决了哪些问题

    转载:https://www.cnblogs.com/xuewuhen/p/7860989.html $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $next ...

  8. php Pthread 线程 互斥锁

    在进行并发操作时,会导致共享数据的完整性的问题,要加入锁,在任意时刻只有一个线程访问该对象在PHP中定义专门用于线程同步控制的mutex的函数, pthreads v3 中已经将 Mutex 类移除. ...

  9. Annotation 标注

    1.画出基本图 当图线中某些特殊地方需要标注时,我们可以使用 annotation. matplotlib 中的 annotation 有两种方法, 一种是用 plt 里面的 annotate,一种是 ...

  10. MySQL优化（三） 表的设计

    1.什么样的表才符合3范式(3 NF)? 表的范式,是首先符合1范式,才能满足2范式,进一步才能满足3范式:(现在最高级别是6范式) 第一范式:1NF 是对属性的原子性约束,要求表的属性(列)具有原子 ...