jquery轮播

最新推荐文章于 2024-07-30 17:19:26 发布

一只前端小博客

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/m0_56054312/article/details/131292092

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>轮播</title>
		<style>
			.wrapper {
				width: 600px;
				height: 350px;
				border: 1px solid red;
				position: relative;
			}

			/* 5张图片叠加到一块 */
			.wrapper img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}

			.wrapper img:nth-of-type(1) {
				display: block;
			}

			/* 小圆点 */
			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 225px;
				bottom: 10px;
				z-index: 100;
			}

			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 3px solid white;
				border-radius: 50%;
			}

			/* 左右箭头 */
			.wrapper a {
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}

			.wrapper a:nth-of-type(1) {
				left: 10px;
			}

			.wrapper a:nth-of-type(2) {
				right: 10px;
			}

			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./inages/1.jpg" alt="" />
				<img src="./inages/2.jpg" alt="" />
				<img src="./inages/3.jpg" alt="" />
				<img src="./inages/4.jpg" alt="" />
				<img src="./inages/5.jpg" alt="" />
			</div>
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);">&lt;</a>
			<a href="javascript:void(0);">&gt;</a>
		</div>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
		<script>
			var index = 0;
			// 点击上一张
			$("a:first").click(function () {
				prev_pic();
			});
			// 点击下一张
			$("a:last").click(function () {
				next_pic();
			});
			// 悬浮停止
			$(".wrapper").mouseover(function () {
				clearInterval(id);
			});
			$(".wrapper").mouseout(function () {
				autoplay();
			});

			// 下一张
			function next_pic() {
				index++;
				if (index > 4) {
					index = 0;
				}
				addStyle();
			}

			// 上一张
			function prev_pic() {
				index--;
				if (index < 0) {
					index = 4;
				}
				addStyle();
			}

			// 控制图片显示隐藏,小圆点背景色
			function addStyle() {
				$("img").eq(index).fadeIn();
				$("img").eq(index).siblings().fadeOut();
				$("span").eq(index).addClass("active");
				$("span").eq(index).siblings().removeClass("active");
			}

			// 自动轮播
			var id;
			autoplay();
			function autoplay() {
				id = setInterval(function () {
					next_pic();
				}, 1000);
			}
		</script>
	</body>
</html>