0

おそらく数百万のスライダーの1つを使用する代わりに、非常に単純なjqueryスライダーを作成しようとしています。というわけでほぼ完成ですが、問題が。jquery の animate を使用して画像を移動しています。スクリプトを機能させるには、すべての画像を同じ水平線上に表示する必要があります。今、それらは縦にリストされており、私はこれを2時間考えていました. したがって、HTMLは次のとおりです。

<div id="gallery-wrap">
<div id="gallery">
    <img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
<div style="clear: both;"></div>

CSS:

    #gallery-wrap{margin: 0 auto; overflow: visible; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{float:left; width:100%; height:300px;}

#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; background-color:rgba(77,77,77,0.5);}
#gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px; background-color:rgba(88,88,88,0.5);}

そしてjquery：

 $(document).ready(function(){ 

    $("#gallery-prev").click(function(){
  $(".galleryimage").animate({"left": "-=100%"}, "slow");
});

$("#gallery-next").click(function(){
  $(".galleryimage").animate({"left": "+=100%"}, "slow");
});

});

間違ったことを説明した場合に備えて、現時点で画像がどのようにレンダリングされるかを示す図を次に示します。英語は私の母国語ではありません。

ここに画像の説明を入力

運が悪い場合は、display:inline を試してみました。

4

3 に答える 3

0

画像のコンテナに持たせることができます

{
  white-space: nowrap;
}

この質問に答えたようにulwidthプロパティを調整する方法は？

于 2012-07-22T12:43:06.870 に答える
0

使用している#gallery li img {display:inline;}

代わりdisplay:inline; にこれに適用し、#gallery liから削除します#gallery li img

#gallery li{width: /*here goes some width*/; height: 300px; float:left; display: inline;}

画像とli要素の幅を100％として使用しないでください。これを確認してくださいMy fiddle

<li>私はあなたのページのソースを見ました。すべての画像を単一の水平行に配置する必要があり、要素に幅を設定し<div style="clear: both;"></div>、テキスト段落の前に使用してフロートをクリアすると仮定しました。

于 2012-07-22T12:23:13.960 に答える
0

サイジング機能を失わずにインライン フローを強制するには、float:left代わりに使用します。display:inline

例を次に示します。

狭いブラウザー ウィンドウで折り返さないようにするには、次のようにギャラリーに固定幅を設定します。

#gallery
{
    width: 1500px;
}
于 2012-07-22T12:20:02.667 に答える