在表格中渲染轮播图的方法；

效果图：代码：

shop()

function shop() {
	// render()
	$.ajax({
		url: "http://jingxun.zhbbll.asia/pc/Commodity/shop_list", //要请求的后端地址
		type: "GET", //数据发送的方式(POST或者GET)
		dataType: 'JSON',
		headers: {
			token: token,
			id: info
		},
		data: {}, //需要传递的参数
		success: function(res) { //ajax请求成功后触发的
			shopdata = res.data;
			render(res.data)
			das = res.data;
			console.log(res);
		},
	})
}
//分也功能
let tbody = document.getElementsByClassName('tbody')[0];
let but = document.getElementById('but');
let page = 0; //页码
let num = 5; //每页数量
let contents = ""; //总数量
let das; //全部数据
let sel = document.getElementById("myselect");
let checkAll = document.getElementById("check_all");
let checkItem = '';
let pageSkips = document.getElementById("page_skip");
// 页面内容渲染
let bbc = [];

function render(shopdata) {
	console.log(shopdata);
	let str = [];
	let ste = ''; //多张轮播图的路径
	let arr = ''; //转为数组每一张的路径
	let stes = [];
	if (shopdata.length == 0) {
		stes = `
		<div class='nodate'>暂无数据</td>
		`
	} else {

	}
	for (i = page * num; i < (page + 1) * num; i++) {
		if (shopdata[i] != undefined) {
			ste = shopdata[i].banner;
			arr = ste.split(","); //分割成数组
			console.log(arr);
			// <td><input type="checkbox" class="check_item" value="${shopdata[i].id}" onclick="checkEst(${shopdata[i].id})"></td>
			str += `
				<tr class="${i%2==0?'excel':'excels'}" style="position: sticky;">
					<td>${i+1}</td>
					<td>${shopdata[i].title}</td>
					<td><div class="icon"><img src="http://jingxun.zhbbll.asia/${shopdata[i].image}" alt=""onerror="nofind()" /></div></td>
					<td>${shopdata[i].price}</td>
					<td>${shopdata[i].num}</td>
					<td><div class="banner-box"><div class="banner">
												<div class="tow">`

			for (let a = 0; a < arr.length; a++) {
				str += `
							<img src="http://jingxun.zhbbll.asia${arr[a]}" alt=""  onerror="nofind()" "/>
						
						`
			}

			str += `</div>
			
												
											<div class="five">`
			for (let d = 0; d < arr.length; d++) {
				str += `<span></span>`

			}
			str += `</div>
											<div class="but">
												<span>&lt;</span>
												<span class="one">&gt;</span>
											</div></div></div></td>
					<td><div class="tui"><label class="toggle-switch" style="position: absolute;">
							<input type="checkbox" onchange="tt(this.checked,${shopdata[i].id})">
							<div class="toggle-switch-background">
								<div class="toggle-switch-handle"></div>
							</div>
						</label></div></td>
						<td><div class="zhuang"><label class="toggle-switch toog" style="position: absolute;">
							<input type="checkbox" onchange="tt(this.checked,${shopdata[i].id})">
							<div class="toggle-switch-background">
								<div class="toggle-switch-handle"></div>
							</div>
						</label></div></td>
					<td>
						<div class="operate ">
							<div class="Editor"  onclick="echo(${shopdata[i].id})">编辑</div>
							<div class="delete" onclick="clde(${shopdata[i].id})">删除</div>
						</div>
					</td>
				</tr>
					`
		}
	}
	$('.last').html(str)
	$('.nodate').html(stes)
	let banner = document.getElementsByClassName('banner'); //获取所有内容的标签
	console.log(banner);
	let tow = document.getElementsByClassName('tow'); //获取所有图片的标签
	let five = document.getElementsByClassName('five'); //获取所有小圆点的标签
	let imgen = tow.children; //获取图片子元素
	let but = document.getElementsByClassName('but'); //获取所有按钮的标签
	let last = document.getElementsByClassName('last')[0];
	let index = []; //初始下标为零
	let intervals = [];
	for (let i = 0; i < tow.length; i++) {
		index.push(0);
	}
	for (let i = 0; i < tow.length; i++) {
		let img = tow[i].children;
		let imgWidth = 120;
		let span = five[i].children;
		let butItem = but[i].children; //获取按钮子元素
		intervals[i] = setInterval(() => {
			// 在 setInterval 的回调中，你需要访问的 DOM 元素应该是根据当前循环的 i 来选择的
			let banner = document.getElementsByClassName('banner')[i];
			// console.log(banner.offsetWidth);
			// console.log(imgWidth);
			console.log(img);
			let width = banner.offsetWidth;
			width = imgWidth;

			if (index[i] < img.length - 1) {
				index[i]++;
				tow[i].style.marginLeft = -index[i] * imgWidth + "px";
			} else {
				index[i] = 0;
				tow[i].style.marginLeft = -index[i] * imgWidth + "px";
			}

			// 更新小圆点的颜色
			for (let j = 0; j < span.length; j++) {
				span[j].style.backgroundColor = "rgba(255, 255, 255, 0.6)";
			}
			span[index[i]].style.backgroundColor = "rgba(0, 0, 255, 0.6)";
		}, 2000);

		// 鼠标移入移出事件处理
		let banner = document.getElementsByClassName('banner')[i];
		console.log(banner);
		banner.onmouseover = function() {
			clearInterval(intervals[i]); // 清除当前轮播的定时器
		};

		banner.onmouseout = function() {
			// 重新启动当前轮播的定时器
			intervals[i] = setInterval(() => {
				// let banner = document.getElementsByClassName('banner')[i];
				// let img = tow[i].children;
				// let imgWidth = img[0].offsetWidth;
				// let span = five[i].children;

				if (index[i] < img.length - 1) {
					index[i]++;
					tow[i].style.marginLeft = -index[i] * imgWidth + "px";
				} else {
					index[i] = 0;
					tow[i].style.marginLeft = -index[i] * imgWidth + "px";
				}

				// 更新小圆点的颜色
				for (let j = 0; j < span.length; j++) {
					span[j].style.backgroundColor = "rgba(255, 255, 255, 0.6)";
				}
				span[index[i]].style.backgroundColor = "rgba(0, 0, 255, 0.6)";
				// 轮播的内容，与上面 setInterval 回调中的内容类似
			}, 2000);
		};

		// 左右按钮点击事件处理
		butItem[0].onclick = function() {
			console.log(index);
			console.log(index[i]);


			if (index[i] > 0) {
				index[i]--;
			} else {
				index[i] = img.length - 1;
			}
			tow[i].style.marginLeft = -index[i] * imgWidth + "px";

			// 更新小圆点的颜色
			for (let j = 0; j < span.length; j++) {
				span[j].style.backgroundColor = "rgba(255, 255, 255, 0.6)";
			}
			span[index[i]].style.backgroundColor = "rgba(0, 0, 255, 0.6)";
		};

		butItem[1].onclick = function() {

			// 右按钮点击事件处理，与你之前的逻辑类似
			if (index[i] < img.length - 1) {
				index[i]++;
			} else {
				index[i] = 0;
			}
			tow[i].style.marginLeft = -index[i] * imgWidth + "px";

			// 更新小圆点的颜色
			for (let j = 0; j < span.length; j++) {
				span[j].style.backgroundColor = "rgba(255, 255, 255, 0.6)";
			}
			span[index[i]].style.backgroundColor = "rgba(0, 0, 255, 0.6)";


		}
		console.log(index);

	}


	// checkItem = document.getElementsByClassName("check_item");
	let content = Math.ceil(shopdata.length / num);
	console.log(content);
	let butStr = ` <span onclick = "left()"> < </span>`;
	for (let i = 0; i < content; i++) {
		if (page - 1 > i && i >= 1) {
			butStr += `<span onclick="left_d()"> ... </span>`;
			i = page - 2;
			continue;
		}
		if (page + 1 < i && content - 2 > i) {
			butStr += `<span onclick="right_d()"> ... </span>`;
			i = content - 2;
			continue;
		}
		butStr +=
			`<span onclick="butt(${i})" style="background-color:${page == i ? "#409EFF;" : ""};"> ${i + 1} </span>`
	}
	butStr += `<span onclick="right()"> > </span>`;
	document.getElementById("but").innerHTML = butStr
	function_name(shopdata)
}
let uid = []; //存放选中状态的id
// //总条数
function function_name(shopdata) {
	contents = shopdata.length;
	$("#sum").text(`共${shopdata.length}条`)
}
//左点击事件
function left() {
	let end = setInterval(function(){}, 10000);
	for (let i = 1; i <= end; i++) {
		clearInterval(i);
	}
	if (page == 0) {
		alert("已经是最后一页了！")
	} else {
		page--;
		// renders(data);
		render(das)
		// render(ardaAll)
	}
	console.log(das);
}
//右点击事件
function right() {
	let end = setInterval(function(){}, 10000);
	for (let i = 1; i <= end; i++) {
		clearInterval(i);
	}
	let content = Math.ceil(contents / num);
	if (page == content - 1) {
		alert("已经是最后一页了！")
	} else {
		page++;
		render(shopdata);
		// render(ardaAll)
	}
}
//页码点击事件
function butt(a) {
	page = a;
	let end = setInterval(function(){}, 10000);
	for (let i = 1; i <= end; i++) {
		clearInterval(i);
	}
	render(das)
}
//每页显示页数
function pageselect() {
	let vinfo = sel.options[sel.selectedIndex].value;
	console.log(vinfo);
	num = vinfo;
	page = 0;
	// checkAll.checked = false;
	render(das);
	// render(ardaAll)
}

讲解：此功能有两大难点;

一、是根据表格的个数渲染轮播图；

二、如何对不同的轮播图进行操作，实现移入、移出、点击轮播等功能；

要解决这两点也有方法一、根据表格去循环渲染轮播图的标签，和图片的个数；

二、在循环渲染不同的定时器；根据下标进行操作不同的轮播图；

希望可以帮到大家；