使用Bootstrap Carousel显示目录中的文件
displaying files from a directory using Bootstrap Carousel
我是JavaScript新手,开始尝试Bootstrap Carousel。我编写了测试代码,当我手动创建Carousel项目时,它可以工作并显示图像,例如
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg"/>
</div>
<div class="item">
<img src="img/2.jpg"/>
</div>
<div class="item">
<img src="img/3.jpg"/>
</div>
</div><!-- .carousel-inner -->
</div><!-- .carousel -->
然而,我想做的是指定一个本地目录,并能够自动加载和查看那里的图像,即自动创建Carousel项目列表。
我的问题是:
- 我怎么能做到这一点与脚本,例如使用perl或python来获得目录中的文件列表?我如何将此列表传递到JS中的Carousel ? 在google上,我发现HTML5有一个File API,可以让JS访问本地文件系统。我如何使用这种方法来实现上述目标?
谢谢!
用您选择的语言创建一个循环,读取目录的内容并输出HTML。
。在python中
import os
dirname = 'img'
html = '<div id="myCarousel" class="carousel slide" data-interval="false">'n't<div class="carousel-inner">'
active = "active"
for filename in os.listdir(dirname):
if ".jpg" in filename:
html = html + ''n't't<div class="item %s"><img src="%s"/></div>' % (active, dirname + "/" + filename)
active = ""
html = html + '</div><!-- .carousel-inner -->'n</div><!-- .carousel -->'
显然你需要对HTML变量做点什么比如把它写入文件
相关文章:
- 使用Bootstrap将JSON文件加载到表中
- Bootstrap CSS和JS我必须将它们包含在单独的文件中,或者可以编译它们
- parent和iframe中的Bootstrap.js文件
- Twitter Bootstrap js文件已加载,但无法与requirejs一起使用
- 将bootstrap.css/js应用于Epub文件
- Bootstrap, CSS, JS - Bootstrap 文件菜单栏在点击后悬停
- 如何使用 Grunt.js在 bootstrap.less 中注入外部 .less 文件
- Krajee Bootstrap 文件输入如何动态更改上传额外数据
- 更改 Angular ui-bootstrap 模板的文件夹位置
- Bootstrap Filestyle-更改文件字段的按钮文本'不起作用
- Jquery,在本地.js文件的情况下,Bootstrap子菜单不显示
- javascript获胜的原因'我不在Twitter上工作;s Bootstrap,即使在调用函数和js文件时也
- javascript赢得了180;我不在Twitter上工作;s Bootstrap,即使链接到正确的css/js文件是
- 在bootstrap 3模式中添加新的文件和克隆
- Jasny BootStrap,设置输入类型的值=“;文件”;
- RequireJS和本地bootstrap.js文件不起作用
- 如何在多个Bootstrap选项卡上运行.js文件
- Bootstrap fileinput删除所有文件文件,而不是要删除的特定预览文件
- Bootstrap 3:下拉菜单不工作与.js和引导文件链接
- 是所有的bootstrap javascript插件集成在一个js文件