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

Trouble showing only 3 thumbnails after mouse drag

本文关键字：略图 显示 拖动 鼠标      更新时间：2023-09-26

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

当前小提琴：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 行中超过 1 个缩略图，但只有 5 个可见，用户可以拖动鼠标滑动以查看其他缩略图。

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

overflow : hidden;

溢出决定的是当盒子内的内容溢出时，它应该如何反应。使用隐藏，我们决定将内容隐藏在盒子内。

代码中的问题：

现在，当您指定.image_holder到300px的宽度时，当它的内部元素将具有更大的累积宽度时，它们将分解到左下角。

溶液：

因此，要使所有这些元素在溢出.image_holder时被隐藏，您必须保留另一个div，其中包含所有宽度范围较大的元素。幸运的是，您有 .drag 的div。只要给它一个更大的宽度，

.drag{
    width : 1000px;
}

现在这个 .dragdiv 将在.image_holder内流动，因为它的宽度是一个很大的值，所有元素都将在一行中，它们也将按照您的预期在div 内流动.image_holder。

这是一个工作小提琴：jsFiddle

引用：

CSS 溢出属性

相关文章：