Question

我需要编写一个水平滚动条/滑块，其中包含每个图像下方的图像和标题;数据以对象数组的形式出现。所以基本上我需要遍历数据并用数据填充滚动条中的每个“项目”;数据将包含图像网址和其他数据。可能有数百个数据项。无论如何，在点击任何项目后，我应该能够“捕获”有关哪个项目被点击的数据，并在我的网页中的其他地方使用。

那里有这样的东西吗？我已经找了一些基于jQuery的解决方案，但到目前为止还没有找到任何符合要求的东西。我不想重新发明轮子并编程，如果已存在的东西。

谢谢！

Answer 1

没关系;这是我的答案。

首先，在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循环中，用图像填充thumnail div;请注意，自定义属性：

 $('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);
});

Javascript：水平图像滚动条/滑块与每个图像的标题等

1 个答案: