使用jQuery将幻灯片动态添加到Bootstrap 3旋转木马
我尝试使用jQuery将幻灯片添加到Bootstrap carousel中，但它在浏览器中不起滑块的作用。相反，它以列表视图显示图像。
<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
onload=function(){
for(var m=3;m>=0;m--)
{
var path="file_uploads/"+m+".jpg";
$(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=\""+m+"\"></li>");
$(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");
}
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
$('.carousel').carousel();
}
</script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html> 回答 1
Stack Overflow用户
发布于 2019-11-22 02:07:04
这是一个更新的答案。@avcajaraville的解决方案是在2014年编写的；在Bootstrap版本4中，他提出的概念仍然适用，但是关于类名的细节已经改变，旧的代码不能工作。
在这个解决方案中，我不关心“指示器”，指示器的添加留给了感兴趣的读者。(“指示器”是代表列表的符号，旋转木马中的每张照片都有一个“点”，当前照片的点被突出显示。)
这是HTML。这是“基本”版本。一个更健壮的版本将在这篇文章的后面出现。
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner" role="listbox">
</div>
</div>注意，我省略了属性data-ride="carousel"；等效项在通过JavaScript传递的配置选项中表示。这符合最新的文档。
这是JavaScript。出于多样性的考虑，此代码与@avcajarville的代码不同，主要不使用jQuery。另一方面，Bootstrap的接口只能通过jQuery，这就是您在这段代码的最后一行中看到的。
假设一个名为recs的数组是一个对象列表，其中每个对象保存有关照片的信息，包括文件名和一些描述性文本。对于每个rec，都会生成一个html字符串，并将其推送到数组itemHtmlStrings上。然后，这些字符串成为carousel-inner元素的innerHTML。然后，其中一个新元素(第一个)被标记为活动(即可见)图像。
var itemHtmlStrings = [];
for(var rec of recs) {
var itemHtmlString = ''
+'<div class="carousel-item">'
+ `<img class="d-block w-100" `
+ ` src="photo/${rec.name}" alt="photo of ${rec.name}">`
+ `<div class="carousel-caption">`
+ `<h3>${rec.captionHdr}</h3>`
+ `<p>${rec.captionText}</p>`
+ '</div>'
+'</div>'
itemHtmlStrings.push(itemHtmlString);
}
var myCarouselEl = document.getElementById("myCarousel");
var carouselInnerEl = myCarouselEl.getElementsByClassName("carousel-inner")[0];
carouselInnerEl.innerHTML = itemHtmlStrings.join("\n");
carouselInnerEl.firstElementChild.className += " active";
$(myCarouselEl).carousel({slide : true, ride : true });不幸的是，在写完这段代码后，我决定Bootstrap提供的Carousel不适合我。如果您唯一的要求是在一组枚举的图像中旋转，并且一次只显示一个图像，则此代码是可以使用的。我没有使用这段代码，因为我需要显示多个图像，而Bootstrap似乎不能做到这一点。此外，我遇到了问题，因为我的图像并不都是相同的；有些图像需要在加载时旋转；这是Bootstrap Carousel中的一个问题。此外，我不确定它如何处理大小和纵横比的多样性。
我承诺的是HTML的非基本版本，所以就是这样。这包括允许用户请求上一张和下一张幻灯片的按钮。此外，它还包括aria-hidden属性和sr-only跨度；这些是用于屏幕阅读器的代码。sr-only类是仅用于屏幕阅读器的引导指示器。(屏幕阅读器是视障人士的“声音”。)
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner" role="listbox">
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" style="background-color:black; color:white;"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" style="background-color:black; color:white; font-size=x-large"></span>
<span class="sr-only">Next</span>
</a>
</div>要添加指示符，请将<ol class="carousel-indicators"></ol>放在carousel-inner之前，并调整JavaScript代码以插入<li>元素列表。在使用指示器时，您需要在适当的(即第一个)指示器元素上设置"active“，就像@avcajaraville所做的那样。
祝你好运，玩得开心。
https://stackoverflow.com/questions/24177572
复制相似问题
腾讯云开发者
