使用jQuery移动滚动条

Question

我一直在用jQuery创建一个图库，一切都完成了。图像水平并排放置在一个div中，其溢出ID隐藏（我不想显示滚动条）。

我有两个箭头左边的箭头和箭头右边的链接。现在我想做的是，当我点击左箭头时，它应显示上一张图像，当我点击右箭头图像时，它应显示下一张图像。我怀疑当使用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（带有overflow:none的div）中放置第二个div来解决这个问题，该div足够宽以容纳所有图像。

正如您的页面一样，执行

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

会做的。然后，如果你执行

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

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

Answer 2

如果你想做一个略显性感的版本，你可以为可滚动区域设置动画。

$("#left").click(function(){
    $("#scroll-holder").animate({ scrollLeft: Math.max(0, $("#scroll-holder").scrollLeft() - 250)}, 175);
});
$("#right").click(function(){
    $("#scroll-holder").animate({ scrollLeft: Math.max(1000, $("#scroll-holder").scrollLeft() + 250)}, 175);
});