使用JS完成首页定时弹出广告图片

最新推荐文章于 2021-06-17 15:31:37 发布

孤独的看着星星流泪

最新推荐文章于 2021-06-17 15:31:37 发布

阅读量2.7k

点赞数

分类专栏： html javaScript 文章标签： javaScript 定时弹出广告图片

本文链接：https://blog.csdn.net/qq_24832821/article/details/79434877

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javaScript

9 篇文章 0 订阅

订阅专栏

一.需求分析

在首页中的顶部做一个定时弹出广告图片。

二.技术分析

隐藏图片： 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部分代码

<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>

孤独的看着星星流泪

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用JS完成首页定时弹出广告图片

一.需求分析在首页中的顶部做一个定时弹出广告图片。二.技术分析隐藏图片： display： none 定时操作： setInterval(“显示图片的函数”， 3000); 三.代码实现1.javaScript部分代码function init(){ //书写轮图片显示的定时操作 setInterval("changeImg()",3000);...
复制链接

扫一扫