1

最新の bjqs と jquery バージョンを使用しています。私はbjqs cssを編集していません。問題は、ページが読み込まれるときに、2 番目の画像が表示されることです。スライドは、他の画像が表示されている場所にスライドするときにこれを続けます。ただし、何らかの方法でウィンドウのサイズを変更すると、bjqs は本来の処理を実行し、画像のサイズを変更して 1 つだけが表示されるようにします。

私はこれを取得します：http://i.imgur.com/zUtwK7F.jpg

これは私のマークアップです。

<div id="container"> 
<-- slider in here -->
</div>

#container {max-width: 1600px;}

jQuery(document).ready(function($) {

$('#banner-slide').bjqs({
animtype      : 'slide',
height        : 520,
width         : 1600,
responsive    : true,
});
});
4

1 に答える 1

0

ここで似たようなものを再現しています: http://jsfiddle.net/Ru5vp/2

html: 

    <!-- start Basic Jquery Slider -->
    <ul class="bjqs">
        <li><img src="http://www.basic-slider.com/img/banner01.jpg" title="Automatically generated caption" /></li>
        <li><img src="http://www.basic-slider.com/img/banner02.jpg" title="Automatically generated caption" /></li>
        <li><img src="http://www.basic-slider.com/img/banner03.jpg" title="Automatically generated caption" /></li>
    </ul>
    <!-- end Basic jQuery Slider -->

  </div>
  <!-- End outer wrapper -->

CSS:

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
#container {max-width: 1600px;}

jQuery の初期化:

jQuery(document).ready(function($) {

    $('#banner-slide').bjqs({
        animtype      : 'slide',
        height        : 520,
        width         : 1600,
        responsive    : true,
    });
});

画像の寸法は、js の高さと幅で宣言されているものとは異なります。寸法を実際の寸法と等しくなるように変更すると、正常に機能します。

height: 826, width: 1600画像を比例してスケーリングする を使用すると、画像が表示するものと同様に画像が設定されることに気付きました。結果ウィンドウのサイズを変更すると、画像はあなたが説明しているようにサイズ変更されます。

于 2013-10-10T18:07:04.883 に答える