轮播图案例演示

最新推荐文章于 2025-12-23 12:24:01 发布

原创最新推荐文章于 2025-12-23 12:24:01 发布 · 396 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端

这篇文章详细描述了一个使用HTML和JavaScript实现的图片轮播功能，展示了如何通过事件监听和样式控制来实现滑动切换图片，类似于在原神启动界面的效果。

源代码演示：原神启动

<!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="https://olimg.3dmgame.com/uploads/images/raiders/20221208/1670462218_746843.jpg" alt=""></li>
				<li><img src="https://pica.zhimg.com/v2-6b0d0b75d5c743d628f43aa19b98109b_r.jpg?source=1940ef5c" alt=""></li>
				<li><img src="https://www.jinwen.net/upload/20221117/2-230220093104b7.jpg" alt=""></li>
				<li><img src="https://upload-bbs.miyoushe.com/upload/2021/04/17/73281682/f810fbc2e4806aab8176e96feee0078e_8325922548792785196.jpg" alt=""></li>
				<li><img src="https://img.zcool.cn/community/019e1760aa6ab711013f4720ffacc1.jpg@1280w_1l_2o_100sh.jpg" 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>