轮播图:

函数绑定在body标签内

采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换。

定时弹出广告:

由于body标签已经绑定了函数

所以直接用 window 加载事件 函数

广告图片的默认display属性是none

3秒后将广告图片的 display属性 设置成block  就可以形成3秒后显示广告图片

弹出后 需要清理定时

然后在写一个3秒定时 隐藏的函数 ,最后也要清理定时。

<script>
function init(){
//书写轮播图显示的定时操作
setInterval("changeImage()",3000); //设置显示广告图片的定时操作
time =setInterval("showAd()",3000)
}
//书写函数
var i=0
function changeImage(){
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.设置隐藏图片的定时操作
time1= setInterval("hiddenAd()",3000);
} //7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为nono
document.getElementById("img2").style.display="none";
clearInterval(time1)
} </script>

JavaScripts广告轮播图以及定时弹出和定时隐藏广告的更多相关文章

  1. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  3. jquery 广告轮播图

    轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...

  4. swift bannerview 广告轮播图

    class BannerView: UIView,UIScrollViewDelegate{ //图⽚⽔平放置到scrollView上 private var scrollView:UIScrollV ...

  5. android-auto-scroll-view-pager (无限广告轮播图)

    github 地址: https://github.com/Trinea/android-auto-scroll-view-pager Gradle: compile ('cn.trinea.andr ...

  6. swift 广告轮播图

    import UIKit import Kingfisher class BannerView: UIView,UIScrollViewDelegate{ enum ImageType{ case I ...

  7. Android广告轮播图实现

    先看效果 第一步,布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...

  8. Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View

    最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...

  9. CycleRotationView:自定义控件之轮播图

    CycleRotationView:自定义控件,主要功能是实现类似与各种商城首页的广告轮播图.其实像这种比较常见的自定义控件早就满大街了,虽然说"不要重复发明轮子",但是不代表不用 ...

随机推荐

  1. JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  2. django admin模块使用

    BBS之admin组件的使用 1.创建超级管理员 创建超级管理员 一. tools>>>>runmanagepyTask>>>>>createsu ...

  3. hdu5319 简单模拟

    题意很好懂,大致就是三种颜色,红和蓝一起会变绿,给个终态矩阵,问从原始状态到终态最少画几笔?  按一定规则画 思路就是记红为1,蓝为2,绿为3,先遍历绿色,针对每一块绿色进行删除,每找到一块绿色,首先 ...

  4. MySQL基础3-SQL语言

    1.DQL语句分类 重点在于Select语句 2.Sql语句的书写规则 3.怎样使用Navicat导入已经写好的sql文件 (1)在Navicat中右击选中的数据库 (2)将sql文件所在的路径添加进 ...

  5. Robotium接入到Jenkins持续集成自动化测试

    6.3 将测试用例接入到Jenkins 由于我是自己学习的手机自动化测试,没有实际投入到工作中使用,jenkins的接入也没有具体操作,现摘抄一下网页:http://www.tuicool.com/a ...

  6. 后缀数组(SA)学习记录

    一只只会后缀自动机却不会后缀数组的弱鸡做了一下HDU - 1403,结果SAM被卡内存了,然后学习了一下SA. 以下两道题都是求LCS,区别在于字符串长度. 参考blog:https://www.cn ...

  7. mysql安装 以及跳过密码登录重设

    修改MySQL的登录设置: vi /etc/my.cnf 在[mysqld]的段中加上一句:skip-grant-tables 例如: [mysqld] datadir=/var/lib/mysql ...

  8. mysql的下载及配置(复制1)

    ---恢复内容开始--- MySQL数据库安装与配置详解 目录 一.概述 二.MySQL安装 三.安装成功验证 四.NavicatforMySQL下载及使用 一.概述 MySQL版本:5.7.17 下 ...

  9. BZOJ 2190:[SDOI2008]仪仗队(欧拉函数)

    [SDOI2008]仪仗队 Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视 ...

  10. 【bzoj3687】简单题 背包dp+STL-bitset

    题目描述 小呆开始研究集合论了,他提出了关于一个数集四个问题:1.子集的异或和的算术和.2.子集的异或和的异或和.3.子集的算术和的算术和.4.子集的算术和的异或和.目前为止,小呆已经解决了前三个问题 ...