Javascript 如何创建垂直图像滚动条?
我在一个网站上有一个页面,它应该显示一栋建筑每一层的图像。目前,我有一个左右面板,左面板包含楼层列表。然后,我需要用户能够单击其中一个链接,并在右侧有一个图像滑块,该滑块在图像之间循环,从底层到顶层,直到它碰到相应的图像 通常在这种情况下,我会使用旋转器,但我需要旋转器快速浏览中间的所有图像 例如:我有一栋10层楼的建筑,目前我正在查看一层。我点击第9层,这意味着我需要滑动条快速浏览第1-9层,最后在第10层结束。我该怎么做?上面的链接将允许我进入10楼,但它不会在所有楼层之间切换。有人知道我怎样才能达到这个效果吗Javascript 如何创建垂直图像滚动条?,javascript,jquery,Javascript,Jquery,我在一个网站上有一个页面,它应该显示一栋建筑每一层的图像。目前,我有一个左右面板,左面板包含楼层列表。然后,我需要用户能够单击其中一个链接,并在右侧有一个图像滑块,该滑块在图像之间循环,从底层到顶层,直到它碰到相应的图像 通常在这种情况下,我会使用旋转器,但我需要旋转器快速浏览中间的所有图像 例如:我有一栋10层楼的建筑,目前我正在查看一层。我点击第9层,这意味着我需要滑动条快速浏览第1-9层,最后在第10层结束。我该怎么做?上面的链接将允许我进入10楼,但它不会在所有楼层之间切换。有人知道我怎
谢谢 其实很简单: 假设您有以下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>
啊,你是个明星!这正是我想要的。谢谢不客气!你解释得很好,我不能错过;)
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);
});