Question

我是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？
谷歌搜索，我发现HTML5有一个文件API，使JS能够访问本地文件系统。如何使用这种方法完成上述工作？

谢谢！

Answer 1

只需在您选择的语言中循环读取目录的内容并输出HTML。

e.g。在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 Carousel显示目录中的文件

1 个答案: