Question

我正在尝试制作水平图像滑块。假设总共有6张图像，一次显示3张。因此外部div的宽度应为3个图像的宽度，内部div的宽度等于6个图像，以便可以使用JavaScript滚动，但内部div的大小仅等于外部div。

HTML

<div class="image_slider">
    <div class="image_wrapper">
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    </div>
</div>

CSS

.image_slider {
    width: 100%;
    position: relative;
    height: 500px;
    overflow: hidden;
}
.image_wrapper {
    position: absolute;
    height: 500px;
    display: inline;
}
.image_wrapper > img {
    width: 500px;
    height: 500px;
}

fiddle

Answer 1

您应该在width:auto上使用max-width:100%，white-space:nowrap和.image_slider。

.image_wrapper应设置为width:auto和position:absolute

    <style>
        .image_slider {
            white-space: nowrap;
            width: auto;
            max-width:100%;
            position: relative;
            height: 500px;
            overflow: hidden;
        }
        .image_wrapper{
            width:auto;
            position:absolute;
        }
        .image_wrapper > img {
            width: 500px;
            height: 500px;
        }
    </style>

    <div class="image_slider">
       <div class="image_wrapper">
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
        <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
       </div>
     </div>

Answer 2

您可以使用jquery动态计算img包装器的宽度，并在下面实现您想要的效果

var width = 0;
$('img').each(function() {
  width += $(this).outerWidth();
});
$('.wrapper').width(width + 100);

div {
  overflow:hidden;
  background: red;
}
img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="wrapper">
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
    <img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
  </div>


</div>

如何使父容器应该包含所有子项

2 个答案: