bootstrap轮播实现一次切换一张(定时切换)
案例实现代码:demo地址
js关键代码
$('.carousel[data-type="multi"] .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
var imgNum = $(".carousel-inner").children(".item").length;
for (var i = 0; i < imgNum-2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
补充内容:
动态生成轮播图片
html
<div class="carousel row" data-ride="carousel" data-type="multi">
<div class="carousel-inner col-md-10 str4 str_wrap">
<!--轮播图-->
</div>
</div>
js
$.ajax({
type: 'POST',
async: true,
data: data,
url: ''//访问后台的地址,
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.length; i++){
LecturerShow(data);
}
},
});
function LecturerShow(e) {
$('.carousel-inner').html("");
var imgNum = e.length;
//一次展示10张图片,所以要根据返回数据的数量,计算生成多少个图片
if (imgNum <= 4) {
switch (10 % imgNum) {
case 0:
for (var i = 0; i < 10; i++) {
$('.carousel-inner').append(itemHtml(i,e[i%imgNum]));
}
break;
case 1:
for (var i = 0; i < 12; i++) {
$('.carousel-inner').append(itemHtml(i,e[i%imgNum]));
}
break;
case 2:
for (var i = 0; i < 12; i++) {
$('.carousel-inner').append(itemHtml(i,e[i%imgNum]));
}
break;
}
} else if(4 < imgNum && imgNum < 10){
for (var i = 0; i < imgNum * 2; i++){
$('.carousel-inner').append(itemHtml(i,e[i%imgNum]));
}
} else {
for (var i = 0; i < imgNum; i++){
$('.carousel-inner').append(itemHtml(i,e[i%imgNum]));
}
}
$('.carousel-inner').children(':first-child').addClass('active');
//定时
$('.carousel').carousel({
interval : 3000
});
$('.carousel[data-type="multi"] .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
var itemNum = $(".carousel-inner").children(".item").length;
for (var i = 0; i < itemNum-2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
}
//生成图片
function itemHtml(i,e) {
var str = "";
if (e.ImgBase == "") {
str = "<img class='imgShow' src='../img/time.png' />";
}
else {
str = "<img class='imgShow' src='data:image/jpg;base64," + e.ImgBase +"' />";
}
var itemHtml = "<div class='item'>" +
"<div class='imgDiv'>" + str +
"<p class=B"+e.LecturerId+">"+ e.Name +"</p>" +
"</div>" +
"</div>";
return itemHtml;
}