JavaScript的幻燈片陣列

我用幻燈片2（http://www.electricprism.com/aeron/slideshow/）展示一對夫婦在我的網站的圖片，問題是圖像的數量和它們的位置應該不難編碼到JavaScript代碼中。JavaScript的幻燈片陣列

我想使用一個陣列（從一個PHP文件輸出）並以某種方式分配新值，以使得所有我的文件夾中的圖像的將而不需要每次手動更新要顯示的「VAR數據」。有什麼想法？

<script> 
     window.addEvent('domready', function(){ 


      var data = { '5.jpg': { caption: '1' }, '2.jpg': { caption: '2' }, '3.jpg': { caption: '3' }, '4.jpg': { caption: '4' }}; 

      new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 }); 

     }); 
    </script>

來源

2012-04-12 user1325414

嘗試http://api.jquery.com/jQuery.ajax/寫一個AJAX功能將數據加載到從請求返回的JS數組中（fetchImages.php - 說這返回5圖像）。如果你到達最後一幅圖像，調用相同的ajax函數（fetchImages.php？start = 5 - 這應該返回下一個圖像的ID大於5的圖像），以將下一個圖像插槽加載到數組中。 – codef0rmer 2012-04-12 06:02:33

如果您使用PHP，那麼你可以很容易地做到這一點。

說，你有得到所有的文件到一個數組，看起來像這樣的邏輯：

$foo = Array("2.jpg" => "2", "3.jpg" => "3");

代表的文件名和標題

那麼你可以做：

<?php echo json_encode($foo); ?>

來輸出它。

如果你將它輸出一個js塊內到一個變量：

var data = <?php echo json_encode($foo); ?>;

至極實際上應該呈現爲：

var data = [{"2.jpg": "2"},{"3.jpg": "3"}];

而且，記住在你的榜樣，你不」實際上使用一個數組，你使用一個Object。有很大的差異。在輸出中，我建議你會得到一個對象數組。你最好循環像這樣：

Array.each(data, function(img) { 

});

而是因爲你的鑰匙是動態的，它使困難迭代，你需要Object.each或Object.keys或for (var key in obj) {}獲取屬性。一個更好的數據結構將是：

$foo = Array(Array("name" => "2.jpg", "caption" => "two"), Array("name" => "3.jpg", "caption" => "three"));

，這意味着在你的js循環，你可以參考一下：

Array.each(data, function(img) { 
    img.name; // filename 
    img.caption; // title  
});

來源

2012-04-12 09:11:44

JavaScript的幻燈片陣列

回答

相關問題