一.需求分析

在首页中的顶部做一个定时弹出广告图片。

二.技术分析

隐藏图片： display： none
        定时操作： setInterval(“显示图片的函数”， 3000);

三.代码实现

1.javaScript部分代码

 function init(){

     //书写轮图片显示的定时操作

     setInterval("changeImg()",3000);

     //1.设置显示广告图片的定时操作

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

 }

 //书写函数

 var i=0

 function changeImg(){

     i++;

     //获取图片位置并设置src属性值

     document.getElementById("img1").src="../img/"+i+".jpg";

     if(i==3){

         i=0;

     }

 }

 //2.书写显示广告图片的函数

 function showAd(){

     //3.获取广告图片的位置

     var adEle = document.getElementById("img2");

     //4.修改广告图片元素里面的属性让其显示

     adEle.style.display = "block";

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

     clearInterval(time);

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

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

 }

 //7.书写隐藏广告图片的函数

 function hiddenAd(){

     //8.获取广告图片并设置其style属性的display值为none

     document.getElementById("img2").style.display= "none";

     //9.清除隐藏广告图片的定时操作

         clearInterval(time);

 }

 2.html部分代码

         <body onload="init()">

 <!--定时弹出广告图片位置-->

         <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>

使用JS完成首页定时弹出广告图片的更多相关文章

  1. JavaScript学习——使用JS完成页面定时弹出广告

    1.获取图片的位置(document.getElementById(“”))  隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...

  2. 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)

     事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...

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

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

  4. JS练习：定时弹出广告

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

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

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

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

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

  7. jQuery网页定时弹出广告

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  8. JavaScripts广告轮播图以及定时弹出和定时隐藏广告

    轮播图: 函数绑定在body标签内 采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...

  9. 009-定时关闭弹出广告窗口 By BoAi 20190414

    ;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...

随机推荐

  1. 【Http认证方式】——Basic认证

    访问请求:http://192.168.2.113:8080/geoserver/rest/workspaces时,浏览器弹出窗口需要输入用户名和密码  ,并且,如果不输入或者输入错误,浏览器返回  ...

  2. 经典ARP协议讲解，一定要看

    以太网协议是目前最流行的通信协议之一.从底层到高层协议家族非常庞大.今天为您介绍一下经常用到却比一定知道的协议. 在链路层上,主机和路由器用他们的物理地址来标志,即48位的物理地址,也是是我们通常所说 ...

  3. 如何用FFmpeg API采集摄像头视频和麦克风音频，并实现录制文件的功能

    之前一直用Directshow技术采集摄像头数据,但是觉得涉及的细节比较多,要开发者比较了解Directshow的框架知识,学习起来有一点点难度.最近发现很多人问怎么用FFmpeg采集摄像头图像,事实 ...

  4. 分布式缓存系统 Memcached 内存管理机制

    在前面slab数据存储部分分析了Memecached中记录数据的具体存储机制,从中可以看到所采用的内存管理机制——slab内存管理,这也正是linux所采用的内存高效管理机制,对于Memchached ...

  5. Flask之数据库操作

    4.2 数据库基本操作 在Flask-SQLAlchemy中,插入.修改.删除操作,均由数据库会话管理.会话用db.session表示.在准备把数据写入数据库前,要先将数据添加到会话中然后调用comm ...

  6. python中descriptor的应用

    [python中descriptor的应用] 1.classmethod. 1)classmethod的应用. 2)classmethod原理. 2.staticmethod. 1)staticmet ...

  7. 反射01 Class类的使用、动态加载类、类类型说明、获取类的信息

    0 Java反射机制 反射(Reflection)是 Java 的高级特性之一,是框架实现的基础. 0.1 定义 Java 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对 ...

  8. SpringBoot15 sell01 项目创建、MySQL数据库连接、日志配置、开发热部署、商品信息模块

    项目软件版本说明: jdk: 1.8 springboot: 2.0.1 mysql: 5.7 1 项目创建 创建一个SpringBoot项目即可,创建是勾选 web jpa mysql 这三个依赖就 ...

  9. 嵌入式Qt开发环境的搭建详解

    一.嵌入式Qt开发环境的搭建前奏 1.下载arm-linux-gcc-4.4.3-20100728.tar.gz 2.下载qt-everywhere-opensource-src-4.8.5.tar. ...

  10. 24、Linux 多线程压缩工具pigz 的学习

    转载: https://blog.csdn.net/q871761987/article/details/72230355 https://blog.csdn.net/woodcorpse/artic ...