0

私のウェブページには5つの画像と1つのdivがあります。ページをロードすると、画像が次々と表示されますが、画像は直線になり、divには一度に1つしか表示されないようにする必要があります。

HTMLコード：

<html>

<head>
<title>My City Karachi</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/slider.css" type="text/css" />
</head>

<body style="margin: 0; padding: 0;">

<div class="slider">
    <img src="asd.jpg"/>
    <img src="baba dedo.jpg"/>
    <img src="picccccture 3.jpg"/>
    <img src="Page-3.jpg"/>
    <img src="Page 4 copy.jpg" />
</div>
</body>

</html>

CSSコード：

@charset "utf-8";

html, body {
    margin: 0;
    padding: 0;

}

.slider {
    margin: 0 auto;
    overflow: hidden;
}

.slider img {
    width: 900px;
    height: 650px;  
    float:left;
}

私は十分に明確だったと思います！

どんな助けでも大歓迎です！:)

4

5 に答える 5

0

試す：

.slider img {
    width: 900px;
    height: 650px;
    display: inline-block:
}
于 2013-03-24T09:54:34.167 に答える
0

画像を横線で表示したい場合

これを確認してください：

width(parent container of Imgs) >= Sum(Width(individual Imgs))

その場合にのみ、水平線で表示されます。それ以外の場合は表示されません。

あなたの場合はそうではありません。

とにかく一度に1つの画像だけを表示したいので、すべてを作成してから、そのdisplay:noneうちの1つを（指定された順序で）選択して作成しdisplay:blockます。

今ではそれができないので、CSSだけを使用すると、javascript（jQuery）が必要になります。

この超シンプルなフィドルを見て、必要なものを示してください。

私がしているのは：

  • 内部のすべての画像をdiv.slider非表示にする

     $('.slider img').each(function(i,v){
    $(this).attr("data-image-index",i).hide();
 });

    また、インデックスを決定するためにimgsに新しい属性を付加しています。

    <img src="asd.jpg" alt="img1" data-image-index="0"  />
<img src="baba dedo.jpg" alt="img2" data-image-index="1" />
 ..
 ..

    • その後、すべてのdiv.sliderimgを非表示にし、data-image-index属性を持つimgを表示する関数を作成しましたindex。

         var index=0;
   function play(){
       $('.slider img').each(function(){
              var s = $(this).data("image-index");
              if(parseInt(s)===index)
                $(this).show();
              else
                $(this).hide();
        });
        index++;
        if(index>5)
           index=0;
   }

    ここで、ボタンをクリックするか、指定された時間間隔でこの関数playを呼び出す必要があるため、1秒ごとに呼び出すためにこれを実行しました。

        setInterval("play()",1000);
于 2013-03-24T10:11:19.600 に答える
0

実例： http： //jsfiddle.net/tceb2/

overflow: auto5つの画像の合計幅の幅を持つ子供がいる固定幅のコンテナ。これにより、水平スクロールバーが作成されます。

次に、スクリプトを使用して、表示する画像と非表示にする画像を管理することにより、スライドショーを作成できます。400pxではなく350pxの幅が必要になりますが、1つの画像の幅です。[次へ]や[一時停止/再生]、おそらく[前へ]などのコントロールを必ず含めてください。自動的に起動しない場合ははるかに優れています。素敵なチュートリアル

于 2013-03-24T10:13:40.963 に答える
0

追加

.slider {
 display: block;
}

次に、display：inline-block;を追加します。.sliderimgへ

フロートを削除：左;

それを試してみてください。わたしにはできる。

于 2013-03-24T10:20:59.100 に答える
-2

ulまたはolを作成し、子アイテム（ここでは画像）を同じリストのliとして追加します。cssでは、必ずlist-style：noneを指定し、必要に応じてマージンまたはパディングを追加してください。

于 2015-12-18T04:28:11.480 に答える