小demo效果如下(忽略样式):
将每页的数据动态渲染上去,每页几条数据自己定义
1.定义数据结构如下:
let bestGoodsList = [
{ name: "美国商标" },
{ name: "英国商标" },
{ name: "澳大利亚商标" },
{ name: "日本商标" },
{ name: "新加坡商标" },
{ name: "加拿大商标" },
{ name: "韩国商标" },
{ name: "中国香港商标" },
{ name: "中国澳门商标" },
];
2.处理数据
let arr = [];
for (let i = 0; i < bestGoodsList.length; i++) {
let idx = Math.floor(i / 4); //每页四条数据,每页几条数据除几即可
if (!arr[idx]) {
arr[idx] = []
}
arr[idx].push(bestGoodsList[i])
}
console.log(arr)
3.将处理后的数据循环遍历渲染到页面
var str = "";
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
var innerStr = "";
for (var j = 0; j < arr[i].length; j++) {
// console.log(arr[i][j].name)
innerStr += `<li>${arr[i][j].name}</li>`
}
if (i == 0) {
str += `
<div class="item active">
<ul class="best-goods">
${innerStr}
</ul>
</div>
`
} else {
str += `
<div class="item">
<ul class="best-goods">
${innerStr}
</ul>
</div>
`
}
}
$('.carousel-inner').html(str)
html结构如下图:
补充:
1.取消自动轮播;
方法一:
方法二:
$('#carousel-example-generic').carousel({
pause: true,
interval: false
});
若方法一无效,则使用方法二;
2.给动态生成的元素添加点击事件需使用事件委派,普通事件点击不会触发;
语法如下:
$('父元素').on('click','子元素',function(){ })
$('#carousel-example-generic').on('click', '点击的子元素', function () {
console.log(1)
})