一.需求分析

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

二.技术分析

隐藏图片： 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. LVS+Keepalived搭建

    LVS+Keepalived搭建 原理说明 (推荐): http://www.cnblogs.com/likehua/archive/2014/06/19/3796849.html http://ou ...

  2. [转载]amba_device使用分析

    什么是AMBA? ---AMBA是一个片内总线规范. ARM官网的介绍:http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.ddi0 ...

  3. PTA 最大子列和问题（10 分）

    最大子列和问题(10 分) 给定K个整数组成的序列{ N​1​​, N​2​​, ..., N​K​​ },“连续子列”被定义为{ N​i​​, N​i+1​​, ..., N​j​​ },其中 1≤ ...

  4. [PYTHON 实作] 算100

    问题:编写一个在1,2,…,9(顺序不能变)数字之间插入+或-或什么都不插入,使得计算结果总是100的程序,并输出所有的可能性.例如:1 + 2 + 34 – 5 + 67 – 8 + 9 = 100 ...

  5. xml处理模块

    xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融行业的很多系统的 ...

  6. Rest之路 - 介绍篇

    What is REST ? REST 是 REpresentational State Transfer 的缩写.是一种基于HTTP协议来进行进行数据交换的web标准框架.她的思想是:视组件为资源. ...

  7. win7下cygwin 中 root用户的设置

    问题描述: cygwin 在 win10下安装完成后使用当前用户登录后看所在磁盘的文件权限是没有问题的,但在cygwin编译出来的文件的权限为空,这个问题可以使用以下方法来解决: 解决办法: 将cyg ...

  8. leetcode582

    public class Solution { public IList<int> KillProcess(IList<int> pid, IList<int> p ...

  9. oracle:RETURNING 子句

    RETURNING 自己通常结合DML 语句使用.(INSERT UPDATE DELETE) 使用方法: UPDATE table_name SET expr1 RETURNING column_n ...

  10. mysql 添加字段、删除字段、调整字段顺序

    用过MySQL的朋友,可能都在使用phpMyAdmin,我从2003年开始使用,感觉那东西适合远程mysql管理,并 不适合单机.单数据库的管理操作,特别是开发使用. 给家推荐一个软件管理mysql数 ...