显示/隐藏 div 中的 bxSlider答案

【问题标题】：bxSlider within show/hide divs显示/隐藏 div 中的 bxSlider
【发布时间】：2014-06-25 02:07:06
【问题描述】：

我的页面内容使用不同的链接进行切换，使用 jQuery 'showonlyone' 函数一次显示一个div。在加载页面时，不应显示任何 div。我让它工作得很好，直到我尝试在其中一个 div 中放置一个图片滑块 (bxSlider)，newboxes1。

在盒子外面，bxSlider 工作正常。在其中，图片不显示。查看实时示例here。

这是我的代码的样子：

<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">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</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 问题，如您所见 here。但是，加载页面时会显示内容，而我希望将所有内容都隐藏起来。任何尝试在代码的其他位置使用display:block 或display:none 均未成功。

谁能想到解决这个问题的方法？谢谢。

【问题讨论】：

标签： javascript jquery html bxslider

【解决方案1】：

我在使用 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（包含滑块）并且效果很好。也许这可以帮助解决您的问题并避免使用可见性：隐藏和其他技巧。

【讨论】：

很好的答案 - 请注意，最新的 BX 滑块版本的功能是 reloadSlider() 而不是 reloadShow()
如果我不再有指向 mySlider 的指针？或者如果我想用一些 CSS 类重新加载所有幻灯片？ $('.bxslider').reloadSlider() 不起作用
不适合我：未捕获的类型错误：slider.reloadSlider 不是函数

【解决方案2】：

我知道不久前有人问过这个问题，但我也有同样的问题。我不知道 bxSlider 和 display:none 是怎么回事。如果内容包含在显示设置为无的 div 中，它似乎不会读取内容。

到目前为止，我已经通过切换 visibility:hidden 和 visibility:visible 而不是显示来解决这个问题。

【讨论】：

这是一个很好的解决方案。谢谢你的想法！！

【解决方案3】：

你可以使用visibility:hidden和visibility:visible，但是会有些麻烦。你可以使用 height:0px;overflow:hidden; 我正在使用最后一个解决方案

【讨论】：

【解决方案4】：

另一种解决方案是允许 bxslider 加载，然后在加载后将其隐藏。

<script>
    var mySlider;

    $(function() {
        mySlider = $('#slider').bxSlider({
            easing: 'easeInCubic',
            displaySlideQty: 3,
            moveSlideQty: 1,
            infiniteLoop: false,
            hideControlOnEnd: true,
            onSliderLoad: function() {
                $('#trainings-slide').hide();
            }
        });
    });
</script>

【讨论】：

这对我不起作用，结果完全相同。