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

使用jQuery移动滚动条

2 个答案: