使用Bootstrap Carousel從目錄顯示文件

Question

我是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 --> 

不過，我想要做的就是指定一個本地目錄，並能夠自動加載和查看圖像出現，那就是自動創建Carousel項目的列表。

我的問題是：

• 我怎樣才能做到這一點使用腳本，例如使用Perl或Python獲取目錄中的文件列表？我如何將這個列表傳遞給JS中的Carousel？
• 谷歌搜索，我發現HTML5有一個文件API，使JS能夠訪問本地文件系統。我怎樣才能使用這種方法做到上述？

謝謝！

Answer 1

只需在選擇讀取目錄內容並輸出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變量喜歡它寫入一個文件