轮播图:

函数绑定在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. python学习——StringIO和BytesIO

    StringIO 很多时候,数据读写不一定是文件,也可以在内存中读写. StringIO顾名思义就是在内存中读写str. 要把str写入StringIO,我们需要先创建一个StringIO,然后,像文 ...

  2. makefile学习(2)

    新建目录如下: ├─include │ integrate.h │ └─src │ integrate.c │ main.c │ makefile │ └─obj obj用于存放object文件. m ...

  3. 动态规划:HDU1087-Super Jumping! Jumping! Jumping!(最大上升子序列和)

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  4. [转载]C#中使用ADO.NET连接SQL Server数据库,自动增长字段用作主键,处理事务时的基本方法

    问题描述: 假设在数据库中存在以下两张数据表: User表,存放用户的基本信息,基本结构如下所示:   类型 说明 ID_User int 自动增长字段,用作该表的主键 UserName varcha ...

  5. 菜鸟学Linux - 文件/文件夹的隐藏属性

    文件/文件夹居然还有隐藏属性?没错,隐藏属性对于文件/文件夹的安全很重要.好比如说,我们需要使用”鉴定符“来揭开装备的隐藏属性:在Linux中chattr/lsattr就是“鉴定符”. chattr基 ...

  6. WPF异步回调时回调函数如何获取异步函数产生的变量

    有这么一个问题,WPF在使用异步回调的时候,回调函数需要用到异步函数里产生的一个变量,例如异步函数里查询数据库得到了一个DataTable,如何传递给回调函数呢? [方案一]使用全局变量 很容易想到的 ...

  7. Asp.net自定义控件开发任我行(5)-嵌入资源上

    摘要 上一篇我们讲了VitwState保存控件状态,此章我们来讲讲嵌入css文件,js文件,嵌入Image文件我也一笔带过. 内容 随着我的控件的完善,我们目标控件DropDwonCheckList最 ...

  8. 极简Node教程-七天从小白变大神(二:中间件是核心)

    当我们只引入express时,前述的那些功能都是没有启用的.那么,如何将这些功能添加进来呢?express通过其中间件机制实现了这些功能的管理.每一个中间件对应一个功能,而中间件可以是第三方库,也可以 ...

  9. DEDE调用指定文章ID来调用特定文档

    http://www.jb51.net/cms/137423.html 代码如下: {dede:arclist row=1 idlist='6'} <li><a href=" ...

  10. leetcode 【 Subsets II 】python 实现

    题目: Given a collection of integers that might contain duplicates, S, return all possible subsets. No ...