8

私のページのコンテンツはdiv、jQuery の「showonlyone」関数を使用して一度に 1 つずつ表示する、さまざまなリンクを使用して切り替えられます。ページのロード時に、div は表示されません。divの1つに画像スライダー（bxSlider）を配置しようとするまで、正常に動作しました newboxes1。

ボックスの外では、bxSlider は正常に動作します。その中で、写真は表示されません。ここで実際の例を参照してください。

私のコードは次のようになります。

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">                                         
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show();
          }
          else {
               $(this).hide();
          }
     });
}</script>  
</script>


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){

$(function(){
  var slider = $('#slidersample').bxSlider({
    mode:'fade',
    controls: false
  });
  $('#bx-prev-sample').click(function(){
    slider.goToPreviousSlide();
    return false;
  });
    $('#hover-next-g-sample').click(function(){
    slider.goToPreviousSlide();
    return false;
  });
  $('#bx-next-sample').click(function(){
    slider.goToNextSlide();
    return false;
  });
  $('#hover-next-d-sample').click(function(){
  slider.goToNextSlide();
  return false;
  });
});
});
</script>
</head>


<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>

<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←&lt;/div></div>
<div class="bx-next"><div id="bx-next-sample">→&lt;/div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
  <li><img src="images/1.jpg" width="580" height="375" /></li>
  <li><img src="images/2.jpg" width="580" height="375" /></li>
  <li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>

 <div class="newboxes" id="newboxes2">DIV 2<br /></div>

 <div class="newboxes" id="newboxes3">DIV 3</div>

</body>
</html>

私が使う

.newboxes {display:none;}

CSS で、ページの読み込み時に div が表示されないようにします。CSS からこれを削除すると、bxSlider の問題が解決されます。ここで確認できます。ただし、ページが読み込まれるとコンテンツが表示されますが、すべてを非表示にしたいです。コードのどこかでdisplay:blockまたはを使用しようとしても失敗しました。display:none

誰でもこれを修正する方法を考えることができますか? ありがとうございました。

4

4 に答える 4

19

bxSlider プラグインでも同様の問題がありました。それを含む DIV が最初に非display:none表示の場合、DIV を表示するとスライドショーが表示されませんでした$('#div-id').show();。スライドショーの操作ボタンのみ登場。次に、次のように問題を解決しました。

<script>

var mySlider;

$(function() {

    mySlider = $('#slider').bxSlider({
            easing: 'easeInCubic',
            displaySlideQty: 3,
            moveSlideQty: 1,
            infiniteLoop: false,
            hideControlOnEnd: true
    });

    $("#processSignUp").click(function() {   // button that sets the DIV visible
        $("#trainings-slide").show();     // DIV that contain SLIDER
        mySlider.reloadSlider();        // Reloads the slideshow (bxSlider API function)
    });

});

</script>

ご覧のとおり、DIV (スライダーを含む) が表示された直後にスライドショーをリロードすると、完全に機能しました。多分それはあなたの問題を解決し、visibility:hidden やその他のトリックの使用を避けるのに役立つかもしれません.

于 2012-09-04T07:55:13.330 に答える
6

この質問が少し前に出されたことは知っていますが、同じ問題があります。bxSlider と display:none がどうなっているのかわかりません。表示がなしに設定されたdivに含まれている場合、コンテンツを読み取っていないようです。

これまでのところ、表示の代わりにvisibility:hiddenandを切り替えることで回避してきました。visibility:visible

于 2012-08-17T15:58:29.700 に答える
2

別の解決策は、bxslider の読み込みを許可し、読み込みが完了したら非表示にすることです。

<script>
    var mySlider;

    $(function() {
        mySlider = $('#slider').bxSlider({
            easing: 'easeInCubic',
            displaySlideQty: 3,
            moveSlideQty: 1,
            infiniteLoop: false,
            hideControlOnEnd: true,
            onSliderLoad: function() {
                $('#trainings-slide').hide();
            }
        });
    });
</script>
于 2014-06-24T17:57:20.373 に答える
2

visibility:hidden と visibility:visible を使用できますが、いくつかの問題があります。そして、height:0px;overflow:hidden; を使用できます。私は最後のソルブを使用しています

于 2014-04-10T14:00:33.917 に答える