Javascript 弹性水平图像滚动锁定到位，并在移动网站上显示相应的缩略图

我正试图在一个移动公文包网站上工作，目标是拥有水平滚动的图像和对应于图像的缩略图菜单

我发现facebook实现的“你可能认识的人”部分非常接近我想要实现的目标。其中，完全滑动将锁定到特定的div图像元素，轻微滑动将弹性地返回到当前图像或转到相邻图像，具体取决于滑动的距离

我目前有以下线框：

但是，部分限制是我不希望使用jquery。 由于以下标记，我有一个可以滚动的列表：

水平图像

<div id="horizontal_image">
    <ul>
        <li><a href="#"><img src="../img/imgA.jpg"></a></li>
        <li><a href="#"><img src="../img/imgB.jpg"></a></li>
        <li><a href="#"><img src="../img/imgC.jpg"></a></li>
    </ul>
</div>

我最头疼的问题是如何让弹性滑动功能工作，轻轻滑动会将div返回到原始锁定位置，但最大化显示前一张或下一张图像的滑动会将后一张图像锁定到位。都没有jquery

感谢您花时间通读这篇文章

<div id="thumb_nail">
    <ul>
        <li><a href="#"><img src="../img/smallimgA.jpg"></a></li>
        <li><a href="#"><img src="../img/smallimgB.jpg"></a></li>
        <li><a href="#"><img src="../img/smallimgC.jpg"></a></li>
    </ul>
</div>

white-space: nowrap;
width: 900px;
overflow-x: auto;