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:自定义控件,主要功能是实现类似与各种商城首页的广告轮播图.其实像这种比较常见的自定义控件早就满大街了,虽然说"不要重复发明轮子",但是不代表不用 ...
随机推荐
- Python知识点入门笔记——Python文件操作、异常处理及random模块使用
文件是存储在外部介质的数据集合,通常可以长久保存,前提是介质不易损坏 Python的绝对路径写法: E:\\编程学习资料\\爬取某社区高清无码大图.py E:/编程学习资料/爬取某社区高清无码大图.p ...
- windows Server 2008 r2-搭建FTP服务器
FTP协议介绍 FTP协议工作在OSI参考模型的第七层,TCP模型的第四层上(即应用层上).使用FTP传输而不是UDP,与服务端建立连接经过三次握手. FTP端口介绍 FTP默认端口是21,.(21端 ...
- linux lvm扩容
1.分区, 查看磁盘使用:fdisk -l 对磁盘分区:fdisk /dev/sdb 2.创建pv pvcreate /dev/sdb1 查看pv: pvdisplay 3.查看vg vgdisp ...
- 栈及其DFS:B - Parentheses Balance
解题心得及总结: 总结: 1.递推:又1推出n,数列中的基本到通项,最终目标得出通项公式. 递归:又n先压缩栈到1,再从函数的出口找到1,又1到n,再从n计算到1: 2.判断是否可以由递推或递推得出, ...
- 遗传算法 | C++版GA_TSP
嗯哼,时隔半年,再次有时间整理关于组合优化问题——旅行商问题(Traveling Salesman Problem, TSP),这次采用的是经典遗传算法(Genetic Algorithm, GA)进 ...
- Eclipse配置Maven工具
1.Maven安装,下载Maven二进行制文件: http://maven.apache.org/download.cgi 下载后解压,然后设置maven的bin目录到系统环境变量Path中,在cmd ...
- 谋哥:App推广最有效的是自推广
[谋哥每天一原创,第一百五十二篇] 目前市场上,各类App已经覆盖到所有你能想到的领域,并且各个山头也被占得差不多了,网上 的说法就是布局已经完成.如果你想现在再插那么一杠子进去,就得看你的真本事了, ...
- STL学习笔记6 -- 栈stack 、队列queue 和优先级priority_queue 三者比较
栈stack .队列queue 和优先级priority_queue 三者比较 默认下stack 和queue 基于deque 容器实现,priority_queue 则基于vector 容器实现 ...
- Leetcode 525.连续数组
连续数组 给定一个二进制数组, 找到含有相同数量的 0 和 1 的最长连续子数组. 示例 1: 输入: [0,1] 输出: 2 说明: [0, 1] 是具有相同数量0和1的最长连续子数组. 示例 2: ...
- [python][django学习篇][14]markdown 代码高亮
1 修改detail视图函数,渲染文件的时候,增加codehight拓展 post.body = markdown.markdown(post.body, extensions=[ 'markdown ...