使用JS完成首页定时弹出广告图片
2024-10-19 06:16:03
一.需求分析
在首页中的顶部做一个定时弹出广告图片。
二.技术分析
隐藏图片: 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"/>
最新文章
- QMap
- Win10 UWP应用发布流程
- VS 代码Diff 之Beyone Compare
- java.sql.SQLException: 对只转发结果集的无效操作: last
- Android Error:Execution failed for task &#39;:app:mergeDebugResources&#39;. >; Crunching Cruncher bg_btn.9.png
- python入门到精通[一]:搭建开发环境
- Linux红帽认证----I Want
- 第二十一章 数据访问(In .net4.5) 之 序列化
- Eclipse Maven插件无法搜索远程库
- python - ImportError: No module named http.cookies error when installing cherrypy 3.2 - Stack Overflow
- Codeforces Round #361 (Div. 2) C.NP-Hard Problem
- Redis 提供的好的解决方案 实例
- 将 Eclipse 的配色改为黑底白字
- pg_dump命令帮助信息
- git操作github仓库基本操作
- Js函数基本介绍
- 接口测试学习笔记(Jmeter)
- Json.NET如何避免循环引用
- JavaScript快速入门-ECMAScript本地对象(String)
- unable to execute dex:GC overhead limit exceeded unable to execute dex:java heap space 解决方案