简易版轮播图(js)

最新推荐文章于 2025-05-12 06:30:40 发布

原创最新推荐文章于 2025-05-12 06:30:40 发布

· 247 阅读

1 ·

版权

文章标签：

#javascript #前端 #html

本文介绍如何利用JavaScript创建一个简单的轮播图效果。通过HTML布局和JavaScript控制，实现图片的自动切换和手动导航，为网站增添动态展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行代码:

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

			#a {
				width: 400px;
				height: 250px;
				margin: 0 auto;
			}

			img {
				width: 400px;
				height: 250px;
			}

			ul {
				margin: 0 auto;
				margin-top: -38px;
				width: 300px;
				list-style: none;
				display: flex;
				justify-content: space-between;
			}

			li {
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
			}

			.xz {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<img src="img/bg1.jpg">
			<ul>
				<li class="xz"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript">
			// 定时器轮播
			var jishu = 1;
			var arr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg"];

			function hh() {
				var img = document.querySelector("#a img");
				img.src = "img/" + arr[jishu];
				var li = document.querySelectorAll("li");
				for (var i = 0; i < arr.length; i++) {
					li[i].classList.remove("xz");
				}
				li[jishu].classList.add("xz");
				jishu++;
				if (jishu > 4) {
					jishu = 0;
				}

			}
			var aa = setInterval(hh, 1000);
			//鼠标移入停止
			var div = document.querySelector("#a");
			div.onmouseover = function() {
				clearInterval(aa);
			}
			div.onmouseout = function() {
				aa = setInterval(hh, 1000);
			}
		</script>
	</body>
</html>

运行效果：