【前端小实战】jQuery 实现轮播图

最新推荐文章于 2024-05-14 16:27:26 发布

Fetters04

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量194

点赞数

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/qq_53569667/article/details/128748493

版权

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
			
		.box {
			height: 300px;
			width: 600px;
			overflow: hidden;
			position: relative;
			margin: 200px auto;
			border: 2px solid gray;
		}
		
		.box ul {
			position: absolute;
			/* 容纳图片的宽度, 配合float让图片排成一排 */
			width: calc(5 * 600px);
			list-style: none;
		}
		
		.box ul li {
			float: left;
			height: 300px;
			width: 600px;
		}
		
		.box ul li img {
			width: 100%;
			height: 100%;
		}
		
		.box p {
			position: absolute;
			bottom: 0;
			left: 210px;
		}
		
		.box p span {
			display: block;
			float: left;
			width: 30px;
			height:30px;
			line-height: 30px;
			text-align: center;
			border: 2px solid black;
			font-size: 20px;
			border-radius: 50%;
			margin: 10px;
			color: blue;
			cursor: pointer;
		}
		
		.active {
			width: 500px;
			height: 500px;
			background-color: white;
		}
	</style>
	
	<body>
		<div class="box">
			<!-- <ul>
				<li>
					<img src="img/轮播图1.jpg"/>
				</li>
				
				<li>
					<img src="img/轮播图2.jpg"/>
				</li>
				
				<li>
					<img src="img/轮播图3.jpg"/>
				</li>
				
				<li>
					<img src="img/轮播图4.jpg"/>
				</li>
			</ul>
			
			<p>
				<span class="active">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</p> -->
		</div>
	</body>
	
	<script src="jquery-3.6.3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 存储所有图片
		var imgArr = ["img/轮播图1.jpg", "img/轮播图2.jpg", "img/轮播图3.jpg", "img/轮播图4.jpg"];
		// 基本布局
		var box = $(".box");
		var ul = $("<ul></ul>");
		box.append(ul);
		var p = $("<p></p>");
		box.append(p);
		
		for (var i = 0; i < imgArr.length; i++) {
			// 添加图片
			var li =  $(`<li><img src=${imgArr[i]}></li>`);
			ul.append(li);
			// 添加小圆点指示器
			var span = $("<span>" + (i+1) + "</span>");
			p.append(span);
		}
		ul.append($(`<li><img src=${imgArr[0]}></li>`))
		
		// 初始化指示器样式
		var allSpan = $(".box p span");
		$(allSpan[0]).addClass("active");
		
		// 通过定时器实现自动轮播
		var n = 0;
		// 每隔一断时间就运行一次函数
		var timer = setInterval(autoPlay, 1000);
		
		// 图片轮播的实现,每执行一次切换一张图片
		function autoPlay() {
			n++;
			// 循环移动
			if (n == imgArr.length + 1) {
				// 跳回第一张
				ul.css({left: 0});
				
				// 准备展示第二张
				n = 1;
			}
			
			// 轮播动画，通过移动left实现
			ul.animate({
				left: -600 * n
			}, 1000)
			
			// 小圆点切换
			switchSpan();
		}
		
		// 小圆点切换的实现
		function switchSpan() {
			// 清除所有小圆点指示器的样式
			$(allSpan).removeClass('active');
			// 显示当前图片对应小圆点的样式
			$(allSpan[n%(imgArr.length)]).addClass("active");
		}
		
		// hover(鼠标移入执行函数, 鼠标移出执行函数)
		box.hover(function() {
			// 清除在运行的定时器，暂停轮播
			clearInterval(timer);
		}, function() {
			// 再次启动定时器，继续轮播
			timer = setInterval(autoPlay, 2000);
		})
		
		// 点击小圆点手动切换
		allSpan.click(function() {
			// 获取当前点击圆点的索引
			var index = $(this).index();
			
			// n 也要随便变化, 为了不影响正常轮播
			n = index;
			
			// 切换到指定的图片
			ul.animate({
				left: -600 * index
			}, 1000)
			
			// 小圆点也要跟着切换
			switchSpan();
		})
	</script>
</html>