简单使用JavaScript实现轮播和实现定时弹窗图片

最新推荐文章于 2022-09-21 18:24:57 发布

Java_yuanxianggang

最新推荐文章于 2022-09-21 18:24:57 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/Java_yuanxianggang/article/details/102769338

简单使用JavaScript实现轮播和实现定时弹窗图片
这是我第一次在优快云上写代码，也算记录自己的学习JavaScript的一个历程吧。

// An highlighted block
var foo = 'bar';
<script>
          //onload是一个页面加载事件
			//init()函数是onload事件绑定一个函数
			function init(){
			//每隔2秒调用changeImg()函数,实现轮播效果
				window.setInterval("changeImg()",3000);
				//书写广告图片的定时操作
				time=window.setInterval(showAd()",3000);
			}
			var i=1;
			function changeImg(){
				i++;
			//获取图片的格式
document.getElementById("img").src="img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
				function showAd(){
				//获取隐藏图片的位置并将隐藏的图片显示
				document.getElementById("img2").style.display="block";
				//清除定时操作
				clearInterval(time);
				//隐藏广告图片的定时操作
				time=window.setInterval("hiddenAd()",3000);
			}
			function showAd(){
			//将图片再次隐藏
			function hiddenAd(){
		document.getElementById("img2").style.display="none";
				clearInterval(time);
			}
		</script>
<body onload="init()">
<div id="">
            <div>
            <!--
            	轮播图片
            -->
			<img src="img/1.jpg" width="1300px" id="img"/>
			 <!--
            	广告图片
            -->
            img src="img/1.jpg" width="1300px" id="img2"/>
			</div>
</body>


``