js实现轮播图

最新推荐文章于 2023-01-13 00:22:49 发布

xuxunjy

最新推荐文章于 2023-01-13 00:22:49 发布

阅读量67

点赞数

文章标签： js javascript dom

本文链接：https://blog.csdn.net/xuxunjy/article/details/108650280

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 700px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<h1 id="h">1</h1>
		<img src="../jpg/1.jpg" id="img1">
		<br>
		<br>
		<input type="button"  id="input1"  value="开始"/>
		<input type="button"  id="input2" value="停止" />
	</body>
	<script type="text/javascript">
		var input1=document.getElementById("input1");
		var input2=document.getElementById("input2");
				var img1=document.getElementById("img1");
			var imgarr=["../jpg/1.jpg","../jpg/2.jpg","../jpg/3.jpg","../jpg/4.jpg","../jpg/5.jpg"];
			var index=0;
			var dong;
			input1.onclick=function(){
				clearInterval(dong)
					dong=	setInterval(function(){
					index++;
					// if(index>=imgarr.length){
					// 	index=0;
					// }
					index=index%imgarr.length;
					img1.src=imgarr[index];
				},1000);
		}
		input2.onclick=function(){
			clearInterval(dong)
		}
		
		
		
		
	</script>
	<script type="text/javascript">
		var h=document.getElementById("h");
		var num=1;
		var timer=setInterval(function(){
			h.innerHTML=num++
			if(num==20){
				clearInterval(timer)
			}
		},1000);
		
	</script>
</html>

xuxunjy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ width: 700px; height: 500px; } </style> </head> <body> <h1 id="h"&gt
复制链接

扫一扫