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

<script type="text/javascript">
		function init() {
			//书写轮图片显示的定时操作
			setInterval("changeImg()",3000);
			
			//设置显示广告图片的定时操作
			var time = setInterval("showAd()",3000);
		}
		
		//书写函数
		var i=0;
		function changeImg() {
			i++;
			document.getElementById("img1").src="../img/"+i+".jpg";
			if(i==3) {
				i=1;
			}
		}
		
		//书写显示广告图片的函数
		function showAd() {
			//获取广告图片的位置
			var adEle = document.getElementById("img2");
			//修改广告图片元素里面的属性让其显示
			adEle.style.display = "block";
			//清除显示图片的定时操作
			clearInterval(time);
			//设置隐藏图片的定时操作
			var time = setInterval("hiddenAd()",3000);
		}
		
		//书写隐藏广告图片的函数
		function hiddenAd() {
			//获取广告图片并设置其style属性的display值为none
			document.getElementById("img2").style.display = "none";
			//清除隐藏广告图片的定时操作
			clearInterval(time);
		}
	</script>

<body οnlοad="init()">

<!-- 定时弹出广告图片位置 -->
                <img id="img2" src="../img/197512569446.jpg" height="20%" style="display: none;" />

一、外部引入js方式

<script type="text/javascript" src="1.js">
        
    </script>

发布了120 篇原创文章 · 获赞 9 · 访问量 4314

猜你喜欢

转载自blog.csdn.net/HuashirenYty/article/details/102696338
今日推荐