Web前端---轮播图

我思故我在420

已于 2024-01-14 19:05:29 修改

阅读量384

点赞数 7

文章标签：前端

于 2024-01-12 10:52:25 首次发布

本文链接：https://blog.csdn.net/2302_81055059/article/details/135545826

版权

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul img {
				width: 550px;
				height: 350px;
				display: none;

			}

			ul {
				list-style: none;
			}

			ol {
				width: 150px;
				height: 20px;
				background-color: rgba(0, 0, 0, .6);
				border-radius: 10px;
				position: absolute;
				left: 200px;
				bottom: 10px;
				list-style: none;
			}

			ol>li {
				width: 13px;
				height: 13px;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
				float: left;
				margin-top: 3px;
				margin-left: 14px;
			}

			#container {
				width: 550px;
				height: 350px;
				position: relative;
			}

			#arr_left,#arr_right {
				width: 50px;
				height: 50px;
				font-size: 50px;
				font-weight: bold;
				position: absolute;
				top: 45%;
				background-color: rgba(255, 255, 255, 0.6);
				color: black;
				text-align: center;
				line-height: 50px;
				border-radius: 50%;
				display: none;
			}
			
			#arr_right{
				right: 0px;
			}
			
		</style>
	</head>
	<body>
		<div id="container">
			<ul>
				<li><img style="display: block;" src="./9150e4e5gy1g3or00xh6sj20k00k0mxk.jpg" alt=""></li>
				<li><img src="./9150e4e5gy1g4ri023pvzj204g04b3ya.jpg" alt=""></li>
				<li><img src="./a6a681ebgy1gph1dmdotyj20g50jawfe.jpg" alt=""></li>
				<li><img src="./14ce36d3d539b60084a5b8abc924ce2ec65cb738.jpeg" alt=""></li>
				<li><img src="./u=1179164164,2619492987&fm=253&fmt=auto&app=138&f=JPEG.webp" alt=""></li>
			</ul>
			<ol>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			<div id="arr_left">&lt;</div>
			<div id="arr_right">&gt;</div>
			
		</div>


		<script>
			let arrow_left = document.getElementById("arr_left")
			let arrow_right = document.getElementById("arr_right")
			let grey_color = "rgba(255,255,255,0.5)"
			let current_index = 0
			let img_arr = document.querySelectorAll('ul img')
			let div = document.querySelector('#container')
			let time_id = setInterval(lunbo, 1000)
			let cirle_arr = document.querySelectorAll("ol > li")

			for (let i = 0; i < cirle_arr.length; i++) {
				cirle_arr[i].index = i
				cirle_arr[i].onclick = function(event) {
					this.style.backgroundColor = "#fff"
					cirle_arr[current_index].style.backgroundColor = grey_color
					img_arr[this.index].style.display = "block"
					img_arr[current_index].style.display = "none"
					current_index = this.index
				}
			}

			function lunbo() {
				current_index++
				if (current_index >= img_arr.length) {
					current_index = 0
				}
				for (let i = 0; i < img_arr.length; i++) {
					if (current_index == i) {
						img_arr[i].style.display = "block"
						cirle_arr[i].style.backgroundColor = "#fff"
					} else {
						img_arr[i].style.display = "none"
						cirle_arr[i].style.backgroundColor = grey_color
					}
				}
			}

			div.onmousemove = function() {
				clearInterval(time_id)
				arrow_left.style.display = "block"
				arrow_right.style.display = "block"
			}
			div.onmouseout = function() {
				time_id = setInterval(lunbo, 1000)
				arrow_left.style.display = "none"
				arrow_right.style.display = "none"
			}
			arrow_left.onclick = function(){
				cirle_arr[current_index].style.backgroundColor = grey_color
				img_arr[current_index].style.display = "none"
				if(current_index >= 1){
					current_index--
				}
				else{
					current_index = 4
				}
				cirle_arr[current_index].style.backgroundColor = "white"
				img_arr[current_index].style.display = "block"
			}
			arrow_right.onclick = function(){
				cirle_arr[current_index].style.backgroundColor = grey_color
				img_arr[current_index].style.display = "none"
				if(current_index < 4){
					current_index++
				}
				else{
					current_index = 0
				}
				cirle_arr[current_index].style.backgroundColor = "white"
				img_arr[current_index].style.display = "block"
			}
		</script>
	</body>
</html>

效果展示：