以前用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. 最适合入门的Laravel中级教程(一)

    Laravel 是一个全栈框架: 我们使用 Laravel 开发业务常见有 3 个方向: 前端页面和后端逻辑混合的应用 主要是面向对 SEO 有需求的项目: 比如说新闻资讯博客文章等: 一般在控制器中 ...

  2. node起一个简单服务，打开本地项目或文件浏览

    1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...

  3. 简单的TSQL基础编程格式，存储过程，视图

    这里简单整理一下数据库简单的编程,变量定义,赋值,分支语句和循环(这里以Sqlserver),以及存储过程格式 首先是变量定义,赋值,分支语句 --======TSQL数据库基础编程,定义变量,赋值, ...

  4. springboot注解大全

    springboot注解:@Service: 注解在类上,表示这是一个业务层bean@Controller:注解在类上,表示这是一个控制层bean@Repository: 注解在类上,表示这是一个数据 ...

  5. 关于echarts图表在tab页中width:100%失效的问题

    https://www.cnblogs.com/tongrenlu/p/9268250.html

  6. 《Effective C++》笔记

    01:视c++为一个语言联邦 为了理解C++,必须要认识其主要的次语言: C 说到底C++仍是以C为基础.区块,语句,预处理器,内置数据类型,数组,指针统统来自C. Object-Oreinted C ...

  7. AngularJS学习笔记(一)

    一.基本指令 1.ng-app=" " 指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围; tips:一个页面里创建多个 ng-app 手动加载即可: ...

  8. 213. House Robber II 首尾相同的偷窃问题

    ［抄题］: You are a professional robber planning to rob houses along a street. Each house has a certain ...

  9. springboot + @KafkaListener 手动提交及消费能力优化

    转载 https://blog.csdn.net/asd5629626/article/details/82776450  https://blog.csdn.net/asd5629626/artic ...

  10. Solidity合约间的调用-1

    当调用其它合约的函数时,可以通过选项.value(),和.gas()来分别指定,要发送的ether量(以wei为单位),和gas值. pragma solidity ^; contract InfoF ...