0

在此处输入图像描述我有代码

<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>

我总是一次显示六张图像，我计划在增加或减少左值时显示剩余的图像，如滑动。我如何实现它。我给包含的 div 和溢出：隐藏到包含的 div 然后我增加/减少图像的包含 div 的左侧，我无法看到剩余的图像。我打算自己尝试我的图像滑块。请帮助我。

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

4

1 回答 1

1

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

基本上，您在容器中嵌套了一个 div（固定为），其中所有图像都彼此相邻。您在容器上设置了溢出：隐藏，因此只有适合容器的图像可见：

<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然后你用and移动你的内部 divright

就是这个概念

于 2013-02-15T10:05:40.127 回答