JavaScript 实现轮播图功能（总结）

本文将详细介绍如何使用 HTML、CSS 和 JavaScript 构建一个轮播图，包括图片的自动轮播、左右箭头控制以及小圆点指示等功能。

我们要实现的轮播图具备以下功能：

1. 自动轮播：图片按照设定的时间间隔自动切换，实现循环播放。
2. 箭头控制：用户可以通过点击左右箭头手动切换图片，控制轮播的方向。
3. 小圆点指示：在轮播图下方显示小圆点，指示当前显示的图片位置
4. 鼠标交互：当鼠标悬停在轮播图上时，自动轮播暂停；鼠标移开后，自动轮播恢复。

 HTML 结构：

			<div class="banner_box" onmouseover="hover()" onmouseout="hoverout()">
				<div class="banner_arrows">
					<img src="./img/箭头左.png" class="left" alt="" onclick="left()"/>
					<img src="./img/箭头右.png" class="right" alt="" onclick="right()"/>
				</div>
				<div class="banner_img">
				</div>
				<div class="banner_dot">
				</div>
			</div>
		
		
		<script src="js/banner.js"></script>

这段 HTML 代码构建了轮播图的基本结构。banner_box是轮播图的容器，banner_arrows包含左右箭头图片，banner_img用于展示轮播的图片，banner_dot则是放置小圆点的区域。同时，通过onmouseover和onmouseout事件绑定了鼠标悬停和移开的函数。

css样式：

*{
				margin: 0;
				padding: 0;
			}
			.banner_box{
				position: relative;
				width: 48%;
				margin-left: 20%;
				margin-top: 5%;
				background-color: aqua;
				overflow: hidden;
			}
			.banner_arrows {
				width: 100%;
				height: 300px;
				position: absolute;
				z-index: 5;
				display: flex;
				justify-content: space-between;
				align-items: center
			}
			
			.banner_arrows img {
				width: 8%;
				height: 15%;
				cursor: pointer;
				/* 当鼠标悬停在图片上时，显示小手 */
			}
			.banner_img{
				width: 100%;
				height: 300px;
				display: flex;
			}
			.banner_img img{
				width: 100%;
				height: 300px;
				float: left;
			}
			.banner_dot{
				position: absolute;
				/* background-color: brown; */
				width: 25%;
				height: 50px;
				bottom: 0px;
				left: 40%;
			}
			span{
				background-color: pink;
				float: left;
				display: block;
				width: 30px;
				height: 30px;
				margin-left: 5px;
				border-radius: 50%;
				
			}

CSS 样式主要用于设置轮播图的布局和外观。banner_box设置为相对定位，并设置了宽度、边距和背景颜色，同时overflow: hidden确保超出容器的图片部分不会显示。banner_arrows是绝对定位，位于轮播图上方，包含左右箭头图片，并设置了箭头的样式和鼠标悬停效果。banner_img使用display: flex来排列图片，banner_dot用于放置小圆点，设置了小圆点的样式和位置。

js逻辑： 

let body = document.getElementsByClassName('banner_img')[0];
let round = document.getElementsByClassName('banner_dot')[0];
let bot = document.getElementsByTagName('span');
// 定时器
let inter;
// 数据
let data;
// 下标
let index = 0;
// 生成一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// open（请求类型是get，请求地址：文件位置写的是json文件，请求方式是true。表示是异步
xhr.open('get', 'js/banner.json', true);
// 接着发送请求
xhr.send();
// 该方法可以定义响应执行函数，当 readyState 属性发
// 生变化时会自动调用该方法。
xhr.onreadystatechange = function() {
	// ready是交互流程。5个阶段，if判断中意思是
	// 交互流程是否达到第五个阶段并且状态等于200请求成功
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 响应文本（返回的数据）
		let text = xhr.responseText;
		// 把返回的json数据转换，并赋值到data变量
		data = JSON.parse(text);
		console.log(data);
		index = 0;
		reader();
		bot[index].style.backgroundColor = 'red';
		inter = setInterval(auto, 2000);
	}
};

// 渲染函数
function reader() {
	let str = '';
	for (let i = 0; i < data.length; i++) {
		str += `
		<img src="${data[i]}" alt="" />`;
	}
	str += `
	<img src="${data[0]}" alt="" />`;
	console.log(str);
	let strs = '';
	for (let i = 0; i < data.length; i++) {
		strs += `<span></span>`;
	}

	round.innerHTML = strs;
	body.innerHTML = str;
}
// 自动轮播
function auto() {
	index++;
	body.style.transition = "all 1s";
	body.style.marginLeft = -index * 100 + "%";
	// console.log(index);

	// bot[ bot.length-1].style.backgroundColor = 'pink'
	console.log(index, data.length);
	if (index >= data.length) {

		index = 0;
		setTimeout(function() {
			body.style.marginLeft = -index * 100 + "%";
			body.style.transition = "none";
		}, 1000)
		bot[0].style.backgroundColor = 'red';
		bot[bot.length - 1].style.backgroundColor = 'pink';
	} else {
		bot[index].style.backgroundColor = 'red';
		bot[index - 1].style.backgroundColor = 'pink';
	}
}
// 鼠标放置到轮播图上时
// 清除定时器
function hover() {
	clearInterval(inter);
}

// 鼠标移开时
// 重新设置定时器
function hoverout() {
	inter = setInterval(auto, 2000);
}

// 右箭头
function right() {
	auto();
	document.getElementsByClassName('right')[0].onclick = null;
	setTimeout(function() {
		document.getElementsByClassName('right')[0].onclick = right;
	}, 1000);
}

// 左箭头
function left() {
	document.getElementsByClassName('left')[0].onclick = null;
	// 首先判断图片下标是否为0
	if (index == 0) {
		// 如果为0那就让下标等于图片的长度（最后一张）
		index = data.length;
		// 并将图片切换到最后一张，过渡为none
		body.style.transition = "none";
		body.style.marginLeft = -(data.length) * 100 + "%";
	}
	// 然后设一个一次性的定时器，时间短一些
	setTimeout(function() {
		// 下标--；
		index--;
		body.style.transition = "all 1s";
		body.style.marginLeft = -index * 100 + "%";
		// console.log(index);
		bot[0].style.backgroundColor = 'pink'
		console.log(index, data.length);
		if (index == data.length - 1) {
			bot[index].style.backgroundColor = 'red';
			bot[0].style.backgroundColor = 'pink';
		} else {
			bot[index].style.backgroundColor = 'red';
			bot[index + 1].style.backgroundColor = 'pink';
		}
	}, 10);
	setTimeout(function() {
		document.getElementsByClassName('left')[0].onclick = left;
	}, 1000);
}

代码解释

1. 数据：从js/banner.json文件中获取图片数据，并将其解析为 JavaScript 对象。获取数据成功后，调用reader函数渲染轮播图，并设置初始的小圆点样式和启动自动轮播定时器。
2. 渲染函数reader：遍历图片数据，生成包含图片img标签的字符串，并在最后添加一张与第一张相同的图片，用于实现无缝循环。同时，生成小圆点的span标签字符串，并将它们分别插入到banner_img和banner_dot中。
3. 自动轮播函数auto：每次调用时，index自增，通过改变body的marginLeft属性来移动图片，实现图片的切换。当index达到图片数量时，重置index为 0，过渡效果也清除，并使用setTimeout设置一个过渡效果，实现无缝循环。同时，更新小圆点的背景颜色，指示当前显示的图片。
4. 鼠标移动函数hover和hoverout：hover函数在鼠标悬停时清除自动轮播定时器，暂停自动轮播；hoverout函数在鼠标移开时重新启动自动轮播定时器，恢复自动轮播。
5. 箭头控制函数right和left：right函数调用auto函数实现向右切换图片，并在切换后暂停箭头的点击事件，1 秒后恢复。（为了防止用户短时间内多次点击）left函数在点击左箭头时，先判断index是否为 0，若为 0 则将index设置为图片数量，切换到最后一张图片，然后通过setTimeout逐步切换到前一张图片，并更新小圆点的背景颜色。同样，在切换后暂停箭头的点击事件，1 秒后恢复。

通过以上代码，我们就能实现一个日常且实用好看的轮播图效果了。