js轮播图有左右箭头和小点

拿走直接用！！！

HTML:

<div class="all">
	<div class="show">
		<div class="print"></div>
		<div class="dots"></div>
		<div id="direction">
			<div onclick="prev()">⬅</div>
			<div class="two" onclick="next()">➡</div>
		</div>
	</div>
</div>

css：

* {
				margin: 0;
				padding: 0;
			}

			.all {
				margin-left: 10%;
			}

			.show {
				width: 86%;
				height: 650px;
				margin-left: 20px;
				margin-top: 20px;
				overflow: hidden;
				position: relative;
			}

			.print {
				display: flex;
				width: 800%;
				transition: all 0.5s;
			}

			.dots {
				display: flex;
				position: absolute;
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
			}

			.dot {
				width: 15px;
				height: 15px;
				margin-left: 13px;
				border-radius: 10px;
				background-color: honeydew;
				cursor: pointer;
			}

			.dot.active {
				background-color: pink;
			}

			.print img {
				width: 100%;
				height: 650px;
				object-fit: cover;
			}

			#direction {
				width: 100%;
				height: 5vh;
				position: absolute;
				top: 45%;
				display: flex;
			}

			#direction div {
				width: 3%;
				height: 5vh;
				text-align: center;
				border-radius: 10px;
				line-height: 5vh;
				font-size: 16px;
				background-color: rgba(0, 0, 0, 0.2);
				color: #fff;
				overflow: hidden;
				cursor: pointer;
			}

			.two {
				margin-left: 94%;
			}

js:

<script>
			// 获取数据
			let data;
			let time;
			let big = document.getElementsByClassName('all')[0];
			let index = 0;
			let dotContainer = document.querySelector('.dots');
			let print = document.querySelector('.print');
			let dots = [];
			
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/new_file.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					data = JSON.parse(text);
					console.log(data);
					renderer(data);

				}
			};
			// 渲染轮播图
			function renderer(data) {
				let str = '';
				let dotStr = '';
				for (let i = 0; i < data.length; i++) {
					str += `<img src="${data[i].path}" alt="" />`; // 构建图片标签
					dotStr += `<div class="dot" onclick="control(${i})"></div>`; // 构建小圆点
				}
				str += `<img src="${data[0].path}" alt="" />`; // 添加第一张图片到最后，实现无缝轮播
				print.innerHTML = str; // 插入图片标签
				dotContainer.innerHTML = dotStr; // 插入小圆点
				dots = document.querySelectorAll('.dot'); // 获取所有小圆点
				dots[0].classList.add('active'); // 将第一个小圆点设为激活状态
				times();
			}

			// 定时器，控制自动轮播
			function times() {
				time = setInterval(function() {
					next();
				}, 3000);

			}

			// 下一张
			function next() {
				index++;
				moveSlide(); // 移动轮播图
			}

			// 上一张
			function prev() {
				index--;
				moveSlide(); // 移动轮播图
			}

			// 控制显示特定图片
			function control(i) {
				index = i;
				moveSlide(); // 移动轮播图
			}

			// 移动轮播图
			function moveSlide() {
				if (index > data.length) {
					// 处理超出范围的情况
					print.style.transition = "none";
					print.style.marginLeft = "0%";
					index = 0;
					setTimeout(function() {
						print.style.transition = "margin-left 0.5s";
						index++;
						print.style.marginLeft = `-${index * 100}%`;
					}, 20);
				} else if (index < 0) {
					// 处理负数的情况
					print.style.transition = "none";
					index = data.length - 1;
					print.style.marginLeft = `-${index * 100}%`;
					setTimeout(function() {
						print.style.transition = "margin-left 0.5s";
					}, 20);
				} else {
					// 正常情况下的移动
					print.style.transition = "margin-left 0.5s";
					print.style.marginLeft = `-${index * 100}%`;
				}
				updateDots(); // 更新小圆点
			}

			// 更新小圆点状态
			function updateDots() {
				dots.forEach(function(dot, i) {
					let actualIndex = index % data.length;
					if (i === actualIndex) {
						dot.classList.add('active'); // 激活当前图片对应的小圆点
					} else {
						dot.classList.remove('active'); // 移除其他小圆点的激活状态
					}
				});
			}

			// 鼠标悬停暂停自动轮播
			big.onmouseover = function() {
				clearInterval(time);
			}

			big.onmouseout = function() {
				clearInterval(time);
				time = setInterval(function() {
					next();
				}, 3000);
			}
		</script>