web前端第六次作业

最新推荐文章于 2024-05-18 21:57:13 发布

Vanilla-li

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量65

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_63890458/article/details/129869372

版权

anner左右切换按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container>img{
				position: absolute;
				width: 100%;
				height: 1000px;
				display: none;
				
			}
			.container{
				position: relative;
				/*border: 1px solid red;*/
				
			}
			#right{
				position: absolute;
				background: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png") no-repeat -41px 50%;
				right: 0px;
				top: 400px;
				width: 41px;
				height: 69px;
				
			}
			#left{
				position:absolute;
				background: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png") no-repeat 0px 50%;
				left: 0px;
				top: 400px;
				width: 41px;
				height: 69px;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = () => {
				let img_arr = document.querySelectorAll(".container>img")
//				console.log(img_arr)
				let right = document.getElementById("right")
//				console.log(right)
				let left = document.getElementById("left")
//				console.log(left)
				let index = 0;
				right.onclick = function (e) {
					console.log(img_arr[index])
					img_arr[index].style.display = "none";
					index = ++index % img_arr.length
					img_arr[index].style.display = "block"
				}
				left.onclick = function (e) {
					console.log(img_arr[index])
					img_arr[index].style.display = "none"
					if (index==0){
						index=img_arr.length - 1
					}else{
						index--
					}
					img_arr[index].style.display = "block"
				}
			}
		</script>
	</head>
	
	<body>
		<div class="container">
			<img src="../第一次作业/加州公园巡警.png" style="display: block;" />
			<img src="../第一次作业/明日的我与昨日的我.png" alt="" />
			<img src="../第一次作业/极速特工.png"/>
		</div>
		<div id="right">
			
		</div>
		<div id="left">
			
		</div>
		
	</body>
</html>

在这里插入图片描述