WEB前端——JS第二次作业

SUPER COW

已于 2023-03-31 12:58:59 修改

阅读量90

点赞数 1

文章标签： javascript 前端 html

于 2023-03-30 23:11:26 首次发布

本文链接：https://blog.csdn.net/weixin_71169037/article/details/129869161

版权

左右切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				position: relative;
			}
			.container > div{
				width: 100%;
				height: 100%;
				position: absolute;
				display: none;
			}
			ul{
				list-style: none;
				height: 15px;
				background-color: greenyellow;
				position: absolute;
				top: 50%;
			}
			#rig{
				right: 0;
			}
			ul > .first{
				margin-left: 10px;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
			}
			ul > .second{
				margin-right: 10px;
				width: 10px;
				height: 10px;
				right: 10px;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
			}
		</style>
		<script>
			window.onload = () =>{
				let left = document.getElementsByClassName("first")
				let right = document.getElementsByClassName("second")
				let div_arr = document.querySelectorAll(".container > div")
				let index = 0
				
				let timer = setInterval(change,2000)
				function change(){
					div_arr[index].style.display = "none"
					index = ++index % div_arr.length
					div_arr[index].style.display = "block"
				}
				
				left.onclick = (e) =>{
					clearInterval(timer)
					div_arr[index].style.display = "none"
					if(index >= div_arr.length - 1){
						index = 0;
					}
					else{
						index++;
					}
					div_arr[index].style.display = "block"
				}
				
				right.onclick = (e) =>{
					clearInterval(timer);
					div_arr[index].style.display = "none"
					if(index <= 0){
						index = div_arr.length - 1
					}
					else{
						index--
					}
					div_arr[index].style.display = "block"
				}
			}
		</script>
	</head>
	<body>
		<div class="container">
			<div style="background-color: red; display: block;"></div>
			<div style="background-color: rebeccapurple;"></div>
			<div style="background-color: yellow;"></div>
		</div>
		<ul class="le">
			<li class="first"></li>
		</ul>
		<ul class="rig">
			<li class="second"></li>
		</ul>
	</body>
</html>