如何创建滚动并使用缩略图进行排序？

Question

我需要从朋友寄给我的一系列照片中创建一个简单的水平滚动。我并没有真正使用javascript工作，因为我认为这是我需要用来实现这一点，但我想在这里首先询问是否有更可行的选项。这是他需要的外壳照片：

其中图片的缩略图将在红色到橙色渐变框中并排显示，其中每侧的箭头移动图片。顶部的排序需要改变图片从左到右排列的方式。

我不是在寻找如何创建它的一步一步。我只是在征求关于如何实现这一目标的建议。我假设最简单的方法可能是jQueryUI但是想要你的建议 - 也许它现在甚至可以在HTML 5中使用了吗？谢谢！

Answer 1

至于排序，您可以使用jQuery Isotope很好地完成此操作。我想你可以把图片放在一个非常狭窄的div中并使用fitRows布局模式。

至于滑动，serialScroll会起作用，虽然像jCarousel这样的东西也可以选择。

Answer 2

创建一个容器元素，其大小与滑块的可见部分相同，然后添加一个可移动的子元素，以移动当前可查看的内容：

<style>
#container {
    position : relative;/*necessary so its child can be positioned absolutely*/
    width    : 500px;
    height   : 200px;
    overflow : hidden;
}
#container ul {
    position   : absolute;
    top        : 0;
    left       : 0;
    list-style : none;
    width      : <total number of LI elements times their width, so eight LI elements would be 800>px
}
#container li {
    width : 100px;
    float : left;
}
</style>

<div id="container">
    <ul>
       <li>item 1</li>
       <li>item 2</li>
       ...
    </ul>
</div>

<script>
$(function () {
    $('#left-nav-button').on('click', function () {
        //use `.animate()` or `.css()` to move the UL element to the left (Hint: negative `left` value)
    });
    $('#right-nav-button').on('click', function () {
        //use `.animate()` or `.css()` to move the UL element to the right
    });
});
</script>

以下是关于jsfiddle的简单演示：http://jsfiddle.net/qML6L/

Answer 3

像jCarousel之类的东西可能适合你。