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>

常に一度に6つの画像を表示する場合、スライドのように左の値を増減して残りの画像を表示する予定です。それを達成するにはどうすればよいですか画像の含まれている div の左を増減すると、残りの画像が表示されません。画像スライダーを自分で試してみたいと思っています。助けてください。

詳細：達成したい画像を追加しました。その画像では、矢印ボタンをクリックすると6つの画像のみが表示され、アニメーションで左のプロパティを使用してスクロールしたい

4

1 に答える 1

1

私はあなたのために JSFiddle を作成しました: http://jsfiddle.net/L4HRY/

基本的に、すべての画像が隣り合っているコンテナー内に div をネストします (fixed with)。コンテナにoverflow: hiddenを設定して、コンテナ内に収まる画像のみが表示されるようにします。

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

次に、内側の div を移動しleft、right

それがコンセプトです

于 2013-02-15T10:05:40.127 に答える