js实现定时弹出广告效果

获取图片的元素对象(document.getElementById(“”))
隐藏图片:display:none
定时操作:setInterval(“显示图片的函数”,3000);
清除定时操作:clearInterval(定时器标识);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.images {
				border: 1px solid red;
				margin: auto;
				width: 500px;
				height: 500px;
			}
		</style>
		<script>
			window.onload = init;
			function init() {
				//2.设置图片显示的定时操作
				time = window.setInterval("showAdv()",3000);
				
			}
			//3编写显示广告函数
			function showAdv() {
				//通过设置style属性的display的值来显示广告
				document.getElementById("showAdv").style.display="block";
				//4清除显示广告的定时操作
				window.clearInterval(time);
				//5.定时隐藏图片
				time2 = window.setInterval("hideAdv()",6000);
				
			}
			function hideAdv() {
				//6通过设置style属性的display的值来隐藏广告
				document.getElementById("showAdv").style.display="none";
				//7清除隐藏广告的定时操作
				window.clearInterval(time2);
			}
			
		</script>
	</head>
	<body>
		<div class="images">
			<img src="images/10.jpg" id="showAdv" width="100%" style="display: none;">
		</div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_43554997/article/details/106396146
今日推荐