Javascript：每个图像带有标题等的水平图像滚动器/滑块

【问题标题】：Javascript: Horizontal Image Scroller/Slider with Captions Etc Per ImageJavascript：每个图像带有标题等的水平图像滚动器/滑块
【发布时间】：2014-10-01 15:51:46
【问题描述】：

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

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

谢谢！

【问题讨论】：

标签： javascript image slider scroller

【解决方案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 循环中，用图像填充缩略图 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);
});

【讨论】：