如何创建垂直图像滚动条

How to create a vertical image scroller?

本文关键字：垂直 图像 滚动条 创建 何创建      更新时间：2023-09-26

我在一个网站上有一个页面，应该显示建筑物每层的图像。目前我有一个左右面板，左侧面板包含楼层列表。然后，我需要用户能够单击其中一个链接，并在右侧有一个图像滑块，该滑块从地面到顶层循环浏览图像，直到到达相应的图像。

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

例如：我有一栋 10 层的建筑物，我目前正在查看一楼。我点击第 9 层，这意味着我需要滑块快速浏览 1-9 层，最后在 10 层结束。我该怎么做？上面的链接将允许我进入 10 楼，但它不会在两者之间的所有楼层中闪烁。有谁知道我如何才能达到这种效果？

谢谢！

其实很简单：

jsBin 演示

假设你有这个 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);
});
相关文章：