大佬教程收集整理的这篇文章主要介绍了使用jQuery动态添加幻灯片到Bootstrap 3旋转木马，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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>
HTML应该是这样的：
<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>
类转盘内部是空的,那里有你要将图像放在那里的地方.
班级旋转木马指数也是空的,将由JS填补.
然后,来JS：
(正如我所说,我依赖于m是一个数组的imgs url的事实)
$(document).ready(function(){ for(var i=0 ; i< m.length ; i++) { $('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner'); $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-inDicators') } $('.item').first().addClass('active'); $('.carousel-inDicators > li').first().addClass('active'); $('#carousel-example-generic').carousel(); });
基本上,您将所有图像附加到类别carousel-inner,您添加旋转木马控制li,然后将活动类添加到第一个图像和第一个轮播指示符li.最后,您初始化您的轮播.请注意,所有这些都在文档就绪功能中,这是您缺少的内容.你所做的只是定义一个名为onload的函数
希望有帮助！
以上是大佬教程为你收集整理的使用jQuery动态添加幻灯片到Bootstrap 3旋转木马全部内容，希望文章能够帮你解决使用jQuery动态添加幻灯片到Bootstrap 3旋转木马所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。