CSS左滚动

Question

我有代码

<div class="slidermoveImgCont center float-left">
    <img id="SImg1"  src="img/nat1.jpg" alt="gg" class="first simg alwaysfirst" name="actualImage1">
    <img id="SImg2"  src="img/nat2.jpg" alt="gg" class="simg" name="actualImage2">
    <img id="SImg3"  src="img/nat3.jpg" alt="gg" class="simg" name="actualImage3">
    <img id="SImg4"  src="img/nat4.jpg" alt="gg" class="simg" name="actualImage4">
    <img id="SImg5"  src="img/nat5.jpg" alt="gg" class="simg" name="actualImage5">
    <img id="SImg6"  src="img/nat6.jpg" alt="gg" class="last simg" name="actualImage6">
    <img id="SImg7"  src="img/nat7.jpg" alt="gg" class="dns simg" name="actualImage7">
    <img id="SImg8"  src="img/nat8.jpg" alt="gg" class="dns simg" name="actualImage8">
    <img id="SImg9"  src="img/nat9.jpg" alt="gg" class="dns simg" name="actualImage9">
    <img id="SImg10" src="img/nat10.jpg" alt="gg" class="dns simg" name="actualImage10">
    <img id="SImg11" src="img/nat11.jpg" alt="gg" class="dns simg" name="actualImage11">
    <img id="SImg12" src="img/nat12.jpg" alt="gg" class="dns simg alwayslost" name="actualImage12">
</div>

我总是一次显示六个图像，我计划显示剩余的图像增加或减少左边的值像sliding.ow我实现它。我给包含div和溢出的宽度：隐藏到包含div然后我增加/减少图像的包含div的左边，我无法看到剩余的图像。我打算自己尝试一下我的图像滑块。请帮助我。

更多信息：我添加了想要实现的图像，在该图像中，只显示了6个图像，点击箭头按钮，我想使用带动画的左侧属性滚动

Answer 1

我为你创建了一个JSFiddle：http://jsfiddle.net/L4HRY/

基本上，您在容器内嵌入一个div（固定为），其中所有图像彼此相邻。您设置overflow：隐藏在容器上，因此只有容器内部的图像可见：

<div class="slidermoveImgCont center float-left">
    <div>
        //snap images
    </div>
</div>

CSS

.slidermoveImgCont
{
    height: 100px;
    width: 700px;
    position: relative;
    overflow: hidden;
}
.slidermoveImgCont div
{
    position: absolute;
    width: 1200px;
}

然后，您使用left和right

移动内部div

这是概念