Question

我想为一系列图像制作水平滚动滑块。我只需要一行图像（它们不能在y轴上重复）。我在这里有一个非常简单的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>

</head>

<body>
<div style="overflow-x:scroll; height:100px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
<img src="01.png" style="float:left; padding:2px">
</div>
</body>
</html>

此代码的问题在于图像列表在y轴上重复，这是不合需要的。很抱歉发布了冗长的图片列表。请帮忙。

Answer 1

处理此问题的一种相对简单的方法是在现有div中添加一些样式，并在其中添加一个额外的div（在图像周围）。首先，将以下样式添加到现有div：

overflow-y: hidden;
overflow-x: scroll;
width: <whatever width in % you want>;

然后在原始div中添加另一个（或其他容器元素），但在图像周围添加：

<body>
  <div ...>
    <div>
      <img ... >
...
    </div>
  </div>
</body>

最后，为这个新div添加一个宽度，它比包含div的宽度宽得多。这应该会导致所有内容正确滚动。

仅供参考：这是hacky，如果您确切知道您将拥有多少图像，那么您可以获得内部正确的宽度。如果你的内部宽度太小，你就不会看到所有的图像。

如何在html中为一系列图像实现水平滚动滑块？

1 个答案: