2012-03-08 11 views
1

私が達成しようとしている何は次のとおりです。セットのdivの高さ:絶対

<div> 
    <div class="img"><img src=""></div> 
    <div class="img"><img src=""></div> 
    <div class="img"><img src=""></div> 
</div>  

彼らはトップに1つずつ配置する必要があるので、画像を含むdiv要素をスライドショーで使用されます最初のものが表示され、他のものが隠されています。

div:position:absoluteを設定すると、外部divの高さが縮小され、レイアウト全体が破棄されます。どのようにそれを修正するためのヒント?

EDIT:HTML構造は交渉可能ではありません。

+0

「div」のディメンションを明示的に定義します。 – alex

+0

画像のサイズが異なる場合があります。 – magtak

+0

なぜ1つのdivタグと1つの画像タグを使用しないのですか?画像のsrc属性を変更するには、javascript関数をクリックするか、特定の時間が経過するたびに変更する必要があります。 –

答えて

2

divの高さをJQueryの内容に従って設定しました。ループ内に1行のコードを追加するだけでした。ケースが閉まった。

0

私はあなたのアプローチが間違っていると思っています。これを行う方法は、divを絶対配置で重ねることではありません。最後の2つのdivにcssを設定して、noneを表示します。次の画像に移動するには、画像をdisplay:ブロックとして設定します。

$("div#image2").show(); 

(例示すには、jQueryのを使用しています)、その後、あなたが一意にあなたのイメージを選択できるようにid属性を追加する必要があります他の2

$("div#image2").siblings().hide(); 

を非表示にします。

+0

*は隠されていて、私は表示と非表示の使い方を知っています。私はそれらを上下に積み重ねたものの上に置くのではないということです。そして、私は.showと.hideを使用していませんが、fadeInとfadeOutは、あらかじめ画像を配置しなければなりません。 – magtak

+0

あなたのアプローチは、スライドショーの原型を表示/非表示にしますが、fadeinとoutを使いたい場合、divはもう片方。 – magtak

関連する問題