Javascript 显示/隐藏 div 中的 bxSlider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11071269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bxSlider within show/hide divs
提问by user1461763
My page's content is toggled using different links, showing one divat a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
我的页面内容使用不同的链接切换，div使用 jQuery 的“showonlyone”功能一次显示一个。在加载页面时，不应显示任何 div。我得到它做工精细，直到我尝试的div的一个内放一个图片滑块（bxSlider） newboxes1。
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
在盒子外面，bxSlider 工作正常。在其中，图片不显示。请参阅此处的现场示例。
Here's what my code looks like :
这是我的代码的样子：
<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>
I use
我用
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:blockor display:noneelsewhere in the code has been unsuccessful.
在 CSS 中，因此在页面加载时没有显示任何 div。从 CSS 中删除它可以解决 bxSlider 问题，正如您在此处看到的。但是，页面加载时会显示内容，而我希望将其全部隐藏。任何在代码中使用display:block或 的尝试display:none均未成功。
Can anyone think of a way to fix this? Thank you.
任何人都可以想出解决这个问题的方法吗？谢谢你。
回答by sh0ne
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
我对 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>
As you can see I reloaded the slideshow just afterthe DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
正如您所看到的，我在显示DIV（包含滑块）之后重新加载了幻灯片，并且效果很好。也许这可以帮助解决您的问题并避免使用可见性：隐藏和其他技巧。
回答by unsunghero
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
我知道这个问题是前一段时间被问到的，但我有同样的问题。我不知道 bxSlider 和 display:none 是怎么回事。如果内容包含在显示设置为 none 的 div 中，它似乎不会读取内容。
I've gotten around it thus far by toggling visibility:hiddenand visibility:visibleinstead of display.
到目前为止，我已经通过切换visibility:hidden而visibility:visible不是显示来解决它。
回答by user3519817
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden; I`m use last solve
你可以使用visibility:hidden 和visibility:visible，但是会有些麻烦。你可以使用 height:0px;overflow:hidden; 我正在使用最后一个解决方案
回答by eightdotthree
Another solution would be to allow bxslider to load, then hide it once it has.
另一种解决方案是允许 bxslider 加载，然后在加载后隐藏它。
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>
