0

jQuery コンテンツ スライダーがあります。しかし、背の高い画像が伸びるという問題があります。画像を中央に配置することはできませんか。オーバーフローを非表示に設定する必要があると言う人もいます。しかし、違いはありません。よろしくモーテン・スタルク

HTML コード:

 <ul class="bxslider">
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/4fac343a-5d4b-4aab-8205-f57f165bc484_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/7bdfb0cc-47ec-4afa-9fc7-aa2cbb9d43a0_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/aad1d457-285d-42e3-8e68-e243bd2988d4_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/768fda69-af61-4322-a60b-012040d78384_Size687x458.jpg"/></li>
<li>
  <img id="propImageSliderLarge" onload="FixImages(true)" src="http://www.blog.designsquish.com/images/uploads/victorian-flatbush-old-hous_thumb.jpg" /></li>

そしてJavascript：

<script type="text/javascript">
  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager'
  });
</script>

そしてCSSコード：

#propImageSliderLarge {
  width: 530px;
  height: 400px;
  overflow: hidden; 
  position: relative;
}
4

3 に答える 3

0

ここで間違っていることが 2 つあります。まず、複数の要素に同じ ID を使用していますが、これは無効です。CSS クラスを使用するつもりだったと思います。次に、タグのwidthおよびheight属性を設定していますIMGが、実際にはこれらの属性をコンテナー (この場合はLI) に設定する必要があります。次のことを試してください。

マークアップをこれに変更します

<li class="propImageSliderLarge">
    <img src="http://billeder.edc.dk/edcmedia/2012/04-April/04/4fac343a-5d4b-4aab-8205-f57f165bc484_Size687x458.jpg"/>
</li>

CSSをこれに変更します

.propImageSliderLarge {
    width: 530px;
    height: 400px;
    overflow: hidden; 
    position: relative;
    text-align: center; /* this will centre your image in the LI */
}

LI コンテナーよりも大きい場合は、画像のサイズを更新します

このスクリプトは、変数が設定されていることを前提containerWidthとしcontainerHeightているため、これらをLIコンテナーのサイズに設定するだけで、コンテナーの最大制約に合わせて画像のサイズが変更されるため、画像全体が表示されます。

function resizeImage(img) {
    var imgWidth = parseInt($(img).width());
    var imgHeight = parseInt($(img).height()); 

    if (imgWidth > containerWidth || imgHeight > containerHeight) {
        $(img).width(containerWidth);
        $(img).height(containerHeight);
    }
}​
于 2013-01-02T09:43:08.867 に答える
0

まず、属性 ID を属性クラスに変更します。Id は識別子を意味し、その名前が示すように、2 つのものが同じ識別子を持つことはできません。画像を中央に配置するには、ul タグに id を指定し、次の css を追加します。

テキスト整列: 中央;

これを試してみてください...うまくいくかどうかわかりません。

于 2013-01-02T09:46:15.530 に答える
0

onload でスライダーを実行して確認できます。

<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      mode: 'fade',
      captions: true
    });
  });
</script>

それ以外の場合は、 http://bxslider.com/examplesで適切なスライダーを使用できます。

于 2013-01-02T10:36:07.350 に答える