javascript - 使用 jQuery 移动滚动条

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));
});

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

---

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

您认为您的图像是这样放置的：

    [可视区域] [溢出....]
.==========================._ ___ ___ ___ ___
X | | | | | | X | | | | . . . | |
X___|___|___|___|___|___|_X_|___|___|___| |___|
"==========================

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

实际上，图像是这样放置的：

    [可视区域]        
.===========================。
X | | | | | | X
X___|___|___|___|___|___| X
"==========================
|___|___|___|___|___|___|
| | | | | | |
|___|___|___|___|___|___| [溢出...]
  ...
 ___ ___ ___ ___ ___ ___
| | | | | | |
|___|___|___|___|___|___|

...所以水平滚动没有好处。（图像实际上是垂直溢出的！事实上，如果您使用相同的代码但使用scrollTop而不是，您可以看到这一点scrollLeft）

图像是环绕的，因为它们位于具有明确宽度的 div 内。

您可以通过在您的第一个 div（带有 的那个overflow:none）中放置第二个 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);
});