使用JQuery移动Scrollbars

Question

我一直在用JQuery创建一个图库,一切都完成了.图像水平并排放置在其溢出ID隐藏的div中(不想显示滚动条).我有两个箭头左边的箭头和箭头右边的链接.现在我想做的是,当我点击向左箭头时,它应该显示上一个图像,当我点击右箭头图像时,它应该显示下一个图像.我怀疑当用jquery点击相应的箭头图像时,我将不得不向右移动滚动条.

怎么做？

谢谢

Answer 1

我相信你可以这样做 scrollLeft

$("#leftArrow").click(function(){
    $("#divId").scrollLeft(Math.max(0, $("#divId").scrollLeft() - 100));
});

$("#rightArrow").click(function(){
    $("#divId").scrollLeft(Math.min(1000, $("#divId").scrollLeft() + 100));
});

使用适当的限制而不是0和1000,以及您的图像宽度而不是100.

但是,查看您的示例页面,您还有另一个问题.

你认为你的图像是这样放置的:

    [Visible area]        [ Overflow .... ]
.=========================._ ___ ___ ___         ___
X   |   |   |   |   |   | X |   |   |   | . . . |   |
X___|___|___|___|___|___|_X_|___|___|___|       |___|
"========================="

并且水平滚动可见区域将使其他图像变得可见.

实际上,图像的放置方式如下:

    [Visible area]        
.=========================.
X   |   |   |   |   |   | X
X___|___|___|___|___|___| X
"========================="
|___|___|___|___|___|___|
|   |   |   |   |   |   |
|___|___|___|___|___|___|  [ Overflow ... ]
  ...
 ___ ___ ___ ___ ___ ___
|   |   |   |   |   |   |
|___|___|___|___|___|___|

...所以水平滚动没有好处.(图像实际上是垂直溢出的!事实上,如果你使用相同的代码而scrollTop不是使用相同的代码,你可以看到这个scrollLeft)

图像是包装的,因为它们位于具有明确宽度的div内.

您可以通过在第一个div中放置第二个div(带有的第二个div)来解决这个问题,该div overflow:none足够宽以容纳所有图像.

正如您的页面一样,执行

javascript:
$("#images")
.css("overflow", "hidden")
.wrapInner("<div style='width:1000px'>");

会做的.然后,如果你执行

javascript:
$("#images").scrollLeft(10);

你会看到水平滚动实际上是有效的.