点击事件的应用

最新推荐文章于 2024-07-25 11:52:08 发布

He33

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量89

点赞数

文章标签： html servlet javascript

本文链接：https://blog.csdn.net/m0_72686745/article/details/126975546

版权

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	.im{
	margin: 100px 500px;
	position: relative;
	}
	img{
	width: 500px;
	height: 500px;
	}
	.bt{
	width: 500px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top:200px;
	}
	.bt button{
	width: 30px;
	height: 30px;
	}
	p{
	width: 500px;
	background-color: black;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	}
	</style>
	</head>

	<body>

	<div class="im">
	<p>1/4</p>
	<img src="./img/1.jpg" alt="">
	<div class="bt">
	<button><</button>
	<button>></button>
	</div>
	<p>猴1</p>
	</div>



	<script>
	var oImg = document.getElementsByTagName('img')[0];
	var btn = document.getElementsByTagName('button');
	var oP = document.getElementsByTagName('p');
	var arr =["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg"];

	var d =0;
	btn[1].onclick = function(){
	d++;
	if(d>=4){
	d=0;
	}
	oImg.src=arr[d];
	oP[0].innerHTML = (d+1) + "/4";
	oP[1].innerHTML = "猴" + (d+1);

	}
	btn[0].onclick = function(){
	d--;
	if(d<0){
	d=3;
	}
	oImg.src=arr[d];
	oP[0].innerHTML = (d+1) + "/4";
	oP[1].innerHTML = "猴" + (d+1);
	}

	</script>
	</body>

	</html>