javascript - 鼠标拖动后无法仅显示 3 个缩略图

Question

我有一个缩略图库，一个一次只显示 3 个缩略图的 div，用户可以向左或向右拖动鼠标以显示更多。

当前 fiddle :http://jsfiddle.net/31ua6jL3/2/

我想达到的目标:- 所有 6 个框排成一行，但只显示左边的 3 个。如果在div之外，右边的3将被隐藏-当我将框拖出div时，框将被隐藏

<div class="container">
    <div class="image_holder">
        <div class="drag">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>
</div>

我在这方面遇到了一些麻烦，我不想使用插件。有人可以指导我走上正确的道路吗？

我正在尝试做类似 http://www.pikachoose.com/ 的事情，你可以看到它包含 5 个缩略图，我想做的是一行 10 个以上的缩略图，但只有 5 个可见，用户可以通过鼠标拖动来滑动以查看其他缩略图。

Answer 1

首先您需要做的是在 .image_holder 中添加以下样式

overflow : hidden;

overflow 决定的是当盒子里的内容溢出时，它应该如何 react 。使用hidden，我们决定让内容隐藏在盒子里。

你的代码有问题:

现在，当您将 .image_holder 的宽度指定为 300px 时，它的内部元素的累积宽度将超过其自身的宽度，它们将分解到左下角。

解决方案:

因此，要使所有这些元素在溢出 .image_holder 时隐藏起来，您必须保留另一个 div 来容纳所有具有高宽度范围的元素。幸运的是，您拥有 .drag 的 div。给它一个更大的宽度，

.drag{
    width : 1000px;
}

现在这个 .drag div 将在 .image_holder 中流动，因为它的宽度是一个很大的值，所以所有元素都将排成一行，它们也会像您预期的那样在 .image_holder div 中流动。

这是一个可用的 fiddle : jsFiddle

引用:

CSS overflow Property