使用Bootstrap Carousel显示目录中的文件

displaying files from a directory using Bootstrap Carousel

本文关键字：文件 Bootstrap Carousel 显示 使用      更新时间：2023-09-26

我是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变量做点什么比如把它写入文件

相关文章：