记录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/jquery-1.12.4.min.js"></script>
<style type="text/css">
.AA>span,
.BB>span {
line-height: 60px;
background: pink;
margin-bottom: 15px;
margin-right: 15px;
}
.AA>span.hide,
.BB>span.hide {
display: none;
}
</style>
</head>
<body>
<button type="button" class="left">左</button>
<div class="BB">
<span>名字</span>
</div>
<button type="button" class="right">右</button>
<div class="AA">
<span>标题</span>
</div>
<script type="text/javascript">
$(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 += '<i>' + twoLength[j].jiang + '</i>'
}
// 第二层数据
if (i > 3) {
data = '<span class="hide dataXuan">' + list[i].name + Aall + '</span>';
} else {
data = '<span class="dataXuan">' + list[i].name + Aall + '</span>';
}
$(".AA").append(data);
};
var dataB = [];
for (var i = 0; i < list.length; i++) {
if (i > 3) {
dataB = '<span class="hide dataXuan">' + list[i].title + '</span>';
} else {
dataB = '<span class="dataXuan">' + list[i].title + '</span>';
}
$(".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
}
});
})
</script>
</body>
</html>
