以前用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. DOM+position:relative+缓冲运动

    一.nodeType节点类型 nodeType==3  ->文本节点 nodeType==1  ->元素节点 for(var i=0;i<oUl.childNodes.length; ...

  2. Sql Server数据库之约束

    一.约束的分类 实体约束:关于行的约束,比如某一行出现的值就不允许别的行出现,如主键 域约束:关于列的约束,对表中所有行的某些列进行约束,如check约束 参照完整性约束:如果某列的值必须与其他列的值 ...

  3. spring @Scheduled 并发

    一.spring定时任务配置 applicationContext.xml:红色代码部分为需要配置的部分. <?xml version="1.0" encoding=&quo ...

  4. 十三、Visitor 访问者设计模式

    需求:将数据结果与处理分开 设计原理: 代码清单: Element public interface Element { void accept(Visitor visitor); } Entry p ...

  5. mysql学习笔记--列属性

    一.是否为空----null || not null 二.默认值----default 三.自动增长----auto_increment 四.主键----primary key 1. 主键:唯一标识表 ...

  6. vue js库的条件渲染

    条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下: v-if v-if可以控制元素的创建或者销毁 <h1 v-if="ok">Yes ...

  7. Head First Servlets & JSP 学习笔记 第七章 —— 作为JSP

    <%@ …… %> 这是指令 <%@ page ……import="java.util.Date" %> 这是page指令,import是page指令的一个 ...

  8. autoMapper dotnetcore webapi 自动添加映射 abp

    在ef的xxxxApplicationModule的Initialize方法中,已经添加了自动映射的配置,如下图: 写的很明白了,我们只需要写一个类继承Profile就可以了.如下图所示: 这样就可以 ...

  9. JMD Handy Baby 2 to Decode & Adding New BMW 525 ID46 Key

    Here OBD2TOOL share the guide on how to use JMD Handy Baby II to decode and add new keys for BMW 525 ...

  10. NGS NGS ngs（hisat,stringtie,ballgown）

    NGS ngs(hisat,stringtie,ballgown) #HISAT (hierarchical indexing for spliced alignment of transcripts ...