如何创建一个垂直图像滚动条？

Question

我在一个网站上有一个页面，它应该显示一栋建筑的每一层的图像。目前，我有一个左右两个面板，左侧面板包含楼层列表。然后，我需要用户能够点击这些链接之一，并在右边有一个图像滑块，循环通过图像，从地面到顶层，直到它击中相应的图像。

通常在这种情况下，我会使用jquery cycle，但我需要旋转器来快速浏览中间的所有图像。

例如:我有一栋10层的建筑，我现在看到的是第一层。我点击9层，这意味着我需要滑块在1-9层快速滑动，最后在10层结束。我该怎么做呢？上面的链接可以让我转到10层，但它不会遍历中间的所有楼层。有人知道我怎样才能达到这个效果吗？

谢谢!

Answer 1

它实际上非常简单：

假设你有这样的HTML：

<div id="thumbs">
  <!-- ... more images here -->
  <img src="thumb/image_4.jpg" />
  <img src="thumb/image_3.jpg" />
  <img src="thumb/image_2.jpg" />
  <img src="thumb/image_1.jpg" />  
</div>
  
<div id="gallery">  <!-- overflow hidden -->
  <div id="slider">  <!-- position absolute -->
    <!-- ... more images here -->
    <img src="image_4.jpg" />
    <img src="image_3.jpg" />
    <img src="image_2.jpg" />
    <img src="image_1.jpg" />            
  </div>  
</div>

jQuery可能如下所示：

var galH = 320; // SET HERE THE GALLERY HEIGHT

var N = $('#slider img').length;

$('#slider').css({ top: -galH*(N-1) }); // initial kick to bring the #slider to the first image

$('#thumbs img').on('click',function(){
  N = $(this).index();
  $('#slider').stop(1).animate({top: -galH*N},1000);
});