以前用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. 关于https不支持http的解决方案

    由于在写md的时候截图是用的微博的图床,上传到github才发现不让在其他网站使用,所有本文只有一张图片. 刚才进行网站测试的时候,微博秀这个插件不能显示出来,一直是空白, 然后我把本地域名改成了12 ...

  2. git 提交丢失Warning, you are leaving 2 commits behind,

    早上在自己的一个版本代码上编辑,提交commint,但是checkout到其他分支再checkout回来发现该的东西不见了, 幸好terminal还没有关掉,回看日志: Warning: you ar ...

  3. 打开控制台F12弹出弹窗

    window.onload=function(){                 document.onkeydown=function(){                     var e=w ...

  4. php curl抓取类分享

    class UsualFunForNetWorkHelper { /*** * post请求数据 */ public static function HttpsPost($url, $data = n ...

  5. yum安装命令：遇到的问题报错如下： File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: 通过看报错可以了解到是使用了python2的语法，所以了解到当前yum使用的Python2，因为我单独安装了python3，且python3设置为默认版本了，所以导致语法问题 解决方法： 使用python2.6 yum install

    1.安装zip yum install -y unzip zip 2.安装lrszs yum -y install lrzsz 3.安装scp 遇到下面的问题: 结果提示: No package sc ...

  6. [剑指Offer]38-字符串的全排列

    链接 https://www.nowcoder.com/practice/fe6b651b66ae47d7acce78ffdd9a96c7?tpId=13&tqId=11180&tPa ...

  7. Python练习-循环及切片-2018.11.27

    #直接用while循环去除.ad l=['xuyutao.ad','wangjun.ad','liuchao.ad','liuyan1.ad'] n=0 L=[] while n < 4: A= ...

  8. 微擎开发------day01

    微擎的数据常量 $_GPC   -- 全局请求变量 类型: array 说明: 合并请求参数, 包括 $_GET, $_POST, $_COOKIE的内容. 相同键名覆盖规则为 $_COOKIE 覆盖 ...

  9. ie每次登陆出现：Windows安全性 iexplore.exe 正在连接到 记住我的凭证不起作用

    解决方案: ie浏览器--设置--Intenet选项--安全--Internet--自定义级别--用户身份验证--登陆 勾选自动使用当前用户名和密码登陆 确定--确定

  10. android app主程序启动前加载图片

    android app加载启动图片需要新创建一个activity,在主activity先加载图片activity,展示过程结束后,显示主activity.具体流程如下: 一.创建图片activity的 ...