如何創建滾動並使用縮略圖進行排序？

我需要從朋友寄給我的一組照片中創建一個簡單的水平卷軸。我並沒有真正使用JavaScript來工作，因爲我認爲這是我需要用來完成的，但我想先問一下這裏是否有更可行的選擇。以下是他所需要的外殼圖：如何創建滾動並使用縮略圖進行排序？

enter image description here

在該圖片的縮略圖會並排的紅色顯示方橙色漸變框，在這裏，每邊的箭頭卻將照片。頂部的排序需要改變圖片從左到右排列的方式。

我不是一直在尋找如何創建這一步。我只是要求我如何去完成這件事。我假設最簡單的方法可能是jQueryUI，但想要你的建議 - 也許它現在在HTML 5中是可行的？謝謝！

2011-12-08 user686327

製作，其大小，你希望你的滑塊可見藥水是一個容器元素，然後添加可以到處移動轉移哪些內容，目前可見的子元素：

<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/

來源

2011-12-08 20:09:42 Jasper

至於排序，你可以用jQuery Isotope完成這個很好。我想你可以把圖片放在一個非常窄的div中，並使用fitRows佈局模式。

至於滑動，serialScroll將工作，雖然類似jCarousel也可以是一個選項。

來源

2011-12-08 20:09:23

類似jCarousel可能適合你。

來源

2011-12-08 20:09:46 Tim

如何創建滾動並使用縮略圖進行排序？

回答

相關問題