效果图：
代码：
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><</span>
<span class="one">></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)
}讲解：此功能有两大难点;
一、是根据表格的个数渲染轮播图；
二、如何对不同的轮播图进行操作，实现移入、移出、点击轮播等功能；
要解决这两点也有方法一、根据表格去循环渲染轮播图的标签，和图片的个数；
二、在循环渲染不同的定时器；根据下标进行操作不同的轮播图；
希望可以帮到大家；
