Question

我有这个div里面的图像，我想要做的是让图像一直走过来让用户能够滚过它们...我希望这是有道理的。这是我的代码：

<div id="gallerySet1">
                <img src="images/1.2.jpg">
                <img src="images/1.3.jpg">
                <img src="images/1.4.jpg">
                <img src="images/1.5.jpg">
                <img src="images/1.6.jpg">
                <img src="images/1.7.jpg">
                <img src="images/1.8.jpg">
                <img src="images/1.9.jpg">
                <img src="images/1.10.jpg">
                <img src="images/1.11.jpg">
                <img src="images/1.12.jpg">
            </div>

和CSS：

            #gallerySet1{
    display:none;
    z-index:1000000;
    position:absolute;
    top:1500px;
}

#gallerySet1 img{
    float:left;


height:400px;
}

我试图像这样显示我的图像：

http://annasafroncik.it/#galleria（点击3张图片中的一张）

Answer 1

您需要使用第二个div来包装所有项目（这也是幻灯片的工作方式）。如果您使用严格的css，则需要确保min-width ==图像的总宽度。如果你想让它更有动态，你可能想要使用一些JavaScript / jQuery来计算所有图像的宽度，并将.wrapper的宽度设置为该宽度（我已经包含）。

<强> DEMO

HTML：

<div id="gallerySet1">
    <div class="wrapper">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/400/300">
        <img src="http://placekitten.com/240/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/40/300">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/200/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/200/300">
        <img src="http://placekitten.com/200/300">
    </wrapper>
</div>

CSS：

#gallerySet1 {
    width: 600px;
    height: 300px;
    overflow-x: scroll;
}
.wrapper {
    min-width: 2200px;
}
.wrapper:after {
    clear: both;
    content:'';
    display: table;
}
img {
    float: left;
}

jQuery：

$(document).ready(function () {
    var imgs = $('img'),
        width = 0,
        wrapper = $('.wrapper');

    imgs.each(function (index) {
        width += $(this).width();
    });

    wrapper.width(width);
});

CSS有图像的div和滚动

1 个答案: