web前端作业 3.28

RongChuJie

已于 2023-04-03 11:29:37 修改

阅读量51

点赞数

文章标签：前端 javascript html

于 2023-03-30 20:22:01 首次发布

本文链接：https://blog.csdn.net/m0_63596823/article/details/129865814

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.banner{
				position: relative;
			}
			.banner>img{
				width:1000px;
				height: 600px;
				position: absolute;
				display: none;
			}
			ul{
				list-style: none;
				/* background-color: black; */
				position: absolute;
			}
			ul>.left{
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-right: 20px solid white;
				float: left;
				margin-top: 250px;
				opacity: 0.5;
			}
			ul>.right{
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid white;
				margin-left: 980px;
				margin-top: 250px;
				opacity: 0.5;
			}
			
			
		</style>
		<script>
			window.onload = ()=>{
				let img_arr = document.querySelectorAll(".banner > img");
				let index = 0;
				let left = document.getElementsByClassName("left")[0];
				let right = document.getElementsByClassName("right")[0];
				
				let timer = setInterval(change,3000)
				function change(){
					img_arr[index].style.display = "none"
					index = ++index % img_arr.length
					img_arr[index].style.display = "block"
				}
				left.onclick = function (e) {
					clearInterval(timer);
					img_arr[index].style.display = "none";
					if (index >= img_arr.length - 1) {
						index = 0;
					} else {	
						index++;
					}
					img_arr[index].style.display = "block";
				}
				right.onclick = function (e) {
					clearInterval(timer);
					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="banner">
			<img style="display: block;" src="./pic/沙丘.png" alt="">
			<img src="./pic/赌神.png" alt="">
			<img src="./pic/交换人生.png" alt="">
		</div>
		<ul>
			<li class="left"></li>
			<li class="right"></li>
		</ul>
	</body>
</html>