JavaScripts广告轮播图以及定时弹出和定时隐藏广告
轮播图:
函数绑定在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广告轮播图以及定时弹出和定时隐藏广告的更多相关文章
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- android中广告轮播图总结
功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...
- jquery 广告轮播图
轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...
- swift bannerview 广告轮播图
class BannerView: UIView,UIScrollViewDelegate{ //图⽚⽔平放置到scrollView上 private var scrollView:UIScrollV ...
- android-auto-scroll-view-pager (无限广告轮播图)
github 地址: https://github.com/Trinea/android-auto-scroll-view-pager Gradle: compile ('cn.trinea.andr ...
- swift 广告轮播图
import UIKit import Kingfisher class BannerView: UIView,UIScrollViewDelegate{ enum ImageType{ case I ...
- Android广告轮播图实现
先看效果 第一步,布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View
最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...
- CycleRotationView:自定义控件之轮播图
CycleRotationView:自定义控件,主要功能是实现类似与各种商城首页的广告轮播图.其实像这种比较常见的自定义控件早就满大街了,虽然说"不要重复发明轮子",但是不代表不用 ...
随机推荐
- HDU 5971 二分图判定
Wrestling Match Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- jvm探秘之三:GC初步
GC即垃圾收集器,虚拟机的必要组成部分. 不过这里说当然是,hotspot虚拟机(jvm的主要版本)的GC机制,前面说过了jvm的组成部分,那么想当然GC只需要负责方法区和堆就好了,虚拟机栈.本地方法 ...
- “帮你APP”团队冲刺2
1.整个项目预期的任务量 (任务量 = 所有工作的预期时间)和 目前已经花的时间 (所有记录的 ‘已经花费的时间’),还剩余的时间(所有工作的 ‘剩余时间’) : 所有工作的预期时间:88h 目前已经 ...
- 随手正则写的 CSDN【只看楼主】功能
写这个的时候居然没有看到原来CSDN已经有这个功能了,写完代码了突然发现原来早就已经有了. 现把代码贴出来吧,虽然有很多解析HTML的开源类库如:http://htmlagilitypack.code ...
- 基础_String
String str1="hello"; String str2="hello"; String str3="hello"; String ...
- Js中的假值_ES5中定义的ToBoolean方法强制类型转换后值为false
你不知道的Javascript(中)--ToBoolean javascript中的值可以分为以下两类: 1.可以被强制类型转换为false的值 2.其他(被强制类型转换为true的值) 假值---以 ...
- ogre3D学习基础12 --- 让机器人动起来(移动模型动画)
学了那么长时间,才学会跑起来.My Ogre,动起来. 第一,还是要把框架搭起来,这里我们用到双端队列deque,前面已经简单介绍过,头文件如下: #include "ExampleAppl ...
- openpyxl模块介绍
openpyxl模块是一个读写Excel 2010文档的Python库,如果要处理更早格式的Excel文档,需要用到额外的库,openpyxl是一个比较综合的工具,能够同时读取和修改Excel文档.其 ...
- Wordpress 作者模板页中的自定义帖子类型分页问题
<?php // 获取当前页面的页数,函数的参数为 paged $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $ ...
- 所有 Python 程序员必须要学会的「日志」记录。
本文字数:3840 字 阅读本文大概需要:10 分钟 写在之前 在我们的现实生活中,「日志记录」其实是一件非常重要的事情,比如银行的转账记录,汽车的行车记录仪记录行驶过程中的一切,如果出现了什么问题, ...