Question

我遇到了bxslider的问题。我只在用户点击按钮时使用javascript来显示滑块。但是当显示滑块时没有滑块？调整浏览器大小时，幻灯片会显示出来。我做了一个小提示来显示效果

这是代码

<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，相应的元素很强，但在这种情况下，你应该只使用css应用font-weight：bold，同时避免使用内联样式。

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

1 个答案: