简单的按钮轮播图

奇怪啊

已于 2022-04-28 09:06:55 修改

阅读量111

点赞数

文章标签： javascript html5

于 2022-04-27 21:58:37 首次发布

本文链接：https://blog.csdn.net/weixin_50275761/article/details/124461823

版权

跟着老师做的回顾知识

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			border: 2px solid red;
			width: 500px;
			height: 280px;
			background-color: aqua;
			margin:40px auto;
			text-align: center;
		}
		img{
			width: 500px;
			height: 250px;
		}
	</style>
	<script>
		window.onload = function(){
			let above=document.getElementById("above");
			let next=document.getElementById("next");
			let img =document.getElementsByTagName("img")[0];
			//数组保存图片
			let imgArr=["img/car.png","img/car2.jpg","img/car3.jpg","img/airplane.jpg"];
			//数组下标
			let index=0;
			
			//事件
			above.onclick=function(){
				index--;
				if (index<0) {
					index=imgArr.length-1;
				}
				img.src=imgArr[index];
				let span1=document.getElementById("span1");
				span1.innerHTML="一共有"+imgArr.length+"张图"+"现在是第"+(index+1)+"张";
			}
			
			next.onclick=function(){
				index++;
				if (index>imgArr.length-1) {
					index=0;
				}
				img.src=imgArr[index];
			let span1=document.getElementById("span1");
			span1.innerHTML="一共有"+imgArr.length+"张图"+"现在是第"+(index+1)+"张";
			}
		}
	</script>
	<body>
		<div id="box">
			<img src="img/airplane.jpg" alt="航空器3">
			<input type="button" id="above" value="above">
			<span id="span1"></span>
			<input type="button" id="next" value="next">
			
		</div>
	</body>
	
</html>