0

我是 JavaScript 新手，开始尝试使用 Bootstrap 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 -->

但是，我想做的是指定一个本地目录并能够自动加载和查看那里的图像，即自动创建轮播项目列表。

我的问题是：

  • 如何使用脚本来做到这一点，例如使用 perl 或 python 来获取目录中的文件列表？如何将此列表传递给 JS 中的 Carousel？
  • 谷歌搜索，我发现 HTML5 有一个 File API，可以让 JS 访问本地文件系统。如何使用这种方法完成上述操作？

谢谢！

4

1 回答 1

0

只需使用您选择的语言循环读取目录的内容并输出 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 变量做一些事情，比如将它写入文件

于 2013-04-09T21:09:27.777 回答