javascript - 使用 bxslider，在调整浏览器大小之前没有幻灯片？

Question

我对 bxslider 有疑问。仅当用户单击按钮时，我才使用 javascript 显示 slider 。但是当显示 slider 时没有幻灯片吗？调整浏览器大小时，幻灯片会显示出来。我做了一个 fiddle 来展示效果

https://jsfiddle.net/Yq3RM/1051/

这是代码

<a class="show_figures" id="show_figures" href="javascript:showOrHidefigure(0);" style="text-decoration: none;">
    <b>
        Show figures
    </b>
</a> 
<div id="figures" style="display: none">
    <ul class="bxslider">
        <li>
            <img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/houses.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/trees.jpg" />
        </li>
    </ul>
</div>

<script type='text/javascript'>
    function showOrHidefigure(id_dummy) {
        var div = document.getElementById('figures');
        var button = document.getElementById('show_figures');
        if (div.style.display == "block") {
            div.style.display = "none";
            button.innerHTML = "<b>Show figures</b>";
        } else {
            div.style.display = "block";
            button.innerHTML = "<b>Hide figures</b>";
        }
     }
 </script>

如何在不调整浏览器大小的情况下显示幻灯片？谢谢卡尔

Answer 1

我已经稍微更新了你的代码，基本上如果你从你的容器中删除 display: none 并用 javascript 隐藏它而不是它允许 bxslider 计算图像的大小，我相信它只有在屏幕加载后才会这样做调整大小。

https://jsfiddle.net/Yq3RM/1058/

HTML:

<a class="show_figures" id="toggle-figures" href="javascript:;">Show figures</a> 

<div id="figures">
    <ul class="bxslider">
        <li>
            <img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/houses.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
        </li>
    </ul>
</div>

JS

var slider = $('.bxslider').bxSlider();
$('#figures').hide();

$('#toggle-figures').on('click', function() {
    $('#figures').toggle();
    if( $('#figures').is(':visible')) {
        $(this).text('Hide figures');
    }
    else {
        $(this).text('Show figures');
    }
});

编辑

另外请注意，不要使用 b 适当的元素很强大，但在这种情况下，您应该只应用 font-weight: bold 和 css，并避免使用内联样式。