记录
.AA>span,
.BB>span {
line-height: 60px;
background: pink;
margin-bottom: 15px;
margin-right: 15px;
}
.AA>span.hide,
.BB>span.hide {
display: none;
}
名字
标题
$(function() {
var list = [{
id: 0,
name: '1/4 Piece(S)',
title: '轮播1',
des: [{
id: 0,
jiang: '我是1'
}, {
id: 0,
jiang: '我是2'
}, {
id: 0,
jiang: '我是3'
}]
}, {
id: 0,
name: '2/4 Piece(S)',
title: '轮播2',
des: [{
id: 0,
jiang: '我是1'
}, {
id: 0,
jiang: '我是2'
}]
}, {
id: 0,
name: '3/4 Piece(S)',
title: '轮播3',
des: [{
id: 0,
jiang: '我是1'
}, {
id: 0,
jiang: '我是2'
}]
}, {
id: 0,
name: '4/4 Piece(S)',
title: '轮播4',
des: [{
id: 0,
jiang: '我是1'
}, {
id: 0,
jiang: '我是2'
}]
}, {
id: 0,
name: '5/4 Piece(S)',
title: '轮播5',
des: [{
id: 0,
jiang: '我是1'
}, {
id: 0,
jiang: '我是2'
}]
}, {
id: 0,
name: '6/4 Piece(S)',
title: '轮播6',
des: [{
id: 0,
jiang: '我是1'
}, {
id: 0,
jiang: '我是2'
}]
}];
// 渲染数据
var data = [];
for (let i = 0; i < list.length; i++) {
var twoLength = list[i].des;
var Aall = '';
for (var j = 0; j < twoLength.length; j++) {
Aall += '' + twoLength[j].jiang + ''
}
// 第二层数据
if (i > 3) {
data = '' + list[i].name + Aall + '';
} else {
data = '' + list[i].name + Aall + '';
}
$(".AA").append(data);
};
var dataB = [];
for (var i = 0; i < list.length; i++) {
if (i > 3) {
dataB = '' + list[i].title + '';
} else {
dataB = '' + list[i].title + '';
}
$(".BB").append(dataB);
};
// 数据总长度
var dataLength = list.length;
// 点击右边
var num = 0;
$(".right").click(function() {
if (num < dataLength - 4) {
num++;
var dataElement = $(".AA .dataXuan");
for (var i = 0; i < dataElement.length; i++) {
$(dataElement[num - 1]).addClass('hide')
$(dataElement[num + 3]).removeClass('hide')
}
var dataElementB = $(".BB .dataXuan");
for (var i = 0; i < dataElementB.length; i++) {
$(dataElementB[num - 1]).addClass('hide')
$(dataElementB[num + 3]).removeClass('hide')
}
} else {
num = dataLength - 4
}
});
// 点击左边
$(".left").click(function() {
if (num > 0) {
num--;
var dataElement = $(".AA .dataXuan");
for (var i = 0; i < dataElement.length; i++) {
$(dataElement[num + 4]).addClass('hide')
$(dataElement[num]).removeClass('hide')
}
var dataElementB = $(".BB .dataXuan");
for (var i = 0; i < dataElementB.length; i++) {
$(dataElementB[num + 4]).addClass('hide')
$(dataElementB[num]).removeClass('hide')
}
} else {
num = 0
}
});
})