Javascript：水平圖像滾動條/帶有字幕的滑塊等每張圖片

-1

我需要編程一個水平滾動條/滑塊，其中包含每個圖像下面的圖像和標題;數據以對象數組的形式出現。所以基本上我需要遍歷數據並用數據填充滾動條中的每個'項目';數據將具有圖片網址和其他數據。可以有數百個數據項目。無論如何，在點擊任何項目時，我應該能夠「捕捉」關於哪個項目被點擊並在我的網頁的其他地方使用的數據。Javascript：水平圖像滾動條/帶有字幕的滑塊等每張圖片

那裏有這樣的事嗎？我尋找了一些基於jQuery的解決方案，但到目前爲止還沒有找到任何符合要求的東西。如果事物已經存在，我不想重新發明輪子並編程。

謝謝！

來源

2014-10-01 IrfanClemson

沒關係;這是我的答案。

首先，在HTML文件中，我有這樣的：

<div id="thumbnail_slider"></div>

與滑塊的風格是：

div#thumbnail_slider { 
    width: 50%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap;  
    position:absolute; 
    margin-top:1%; 
    margin-right:1%; 
    z-index:999999999; 
} 

img.thumb { 
vertical-align: middle; 
cursor: pointer;  
}

然後，在JavaScript循環，填充圖像的略圖格;注意到，自定義屬性：

$('div#thumbnail_slider').append('<img class="thumb" src="' + feature.properties.Tile + '" lat="' + feature.geometry.coordinates[1] + '" lng="' + feature.geometry.coordinates[0] + '"/>');

最後，處理圖像的點擊抓取自定義屬性：

$('img.thumb').click(function() { 
          var sourceURL = $(this).attr('src'); 
          var lat = $(this).attr('lat'); 
          var lng = $(this).attr('lng'); 
          //console.log(lat + " " + lng); 
});

來源

2014-10-02 17:38:45 IrfanClemson

Javascript：水平圖像滾動條/帶有字幕的滑塊等每張圖片

回答

相關問題