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

本文主要是介绍在表格中渲染轮播图的方法；，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：代码：

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 = butStrfunction_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)
}

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

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

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

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

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

希望可以帮到大家；

这篇关于在表格中渲染轮播图的方法；的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---