bxSlider jQuery插件问题

Question

我正在做一个网站，我在其中实现了bxSlider。我有一个页面，其中有许多图像(它们的类名是.item)。当您单击其中一个图像时，一个覆盖窗口将显示并显示内容(包含几个段落)，然后将显示一个斜线。

问题是，我在bxSlider之后立即调用document.ready，而且由于覆盖窗口是隐藏的(display:none)，bxSlider无法正确加载。

所以我决定把$('.bxSlider').bxSlider();放进$('.item').click();里面，它运行得很好。

但是，当我关闭覆盖窗口，然后通过单击.item再次显示它时，它将再次尝试调用bxSlider函数，这将导致问题。

我试图在$('.bxSlider').destroySlide(); (关闭覆盖窗口的div )下调用.close，但它不起作用。

JQuery:

$(function(){
     //show bxslider
    $('a.show').click(function(){
        $('ul.bxslider').fadeIn();
         var slider = $('.bxslider').bxSlider();
        return false;
    });

    //hide bxslider
    $('a.hide').click(function(){
        $('ul.bxslider').fadeOut();
        return false;
    });
});

Html:

<a href class="show">Show Slider</a>
<a href class="hide">Hide Slider</a>
<br /><br />
<ul class="bxslider">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

JSFiddle 链接

有人能帮我吗？这里是插件的选择：

Answer 1

我不知道我是否理解你的问题，但这个答案对你的问题有效吗？

我更新了您代码的以下部分：

//hide bxslider
$('a.hide').click(function(){
    $('ul.bxslider').fadeOut();
   var slider = $('.bxslider').bxSlider();
    slider.destroySlider();
});

http://jsfiddle.net/GnBTm/5/

更新

我粘贴的代码--这是下面代码的一部分，你需要使用相等的这个，好吗？

$(function(){
     //show bxslider
    $('a.show').click(function(){
        $('ul.bxslider').fadeIn();
         var slider = $('.bxslider').bxSlider();
        return false;
    });

    //hide bxslider
    $('a.hide').click(function(){
        $('ul.bxslider').fadeOut();
        var slider = $('.bxslider').bxSlider();
        slider.destroySlider();
    });
});

向你问好，罗德里戈

Answer 2

代码的问题是没有保存you滑块句柄。第二个问题是你打电话给destroySlide而不是destroySlider。

http://jsfiddle.net/4Nt7w/

看一下小提琴里的解决方案。

 var slider = "";
 //show bxslider
$("#show").on('click',function(){
    $('ul.bxslider').fadeIn();
     slider = $('.bxslider').bxSlider();
    return false;
});

//hide bxslider
$('#hide').on('click',function(){
    $('ul.bxslider').fadeOut();
    slider.destroySlider();
});

HTML代码

 <input type="button" id="show" class="show" value="Show Slider" />
 <input type="button" id="hide" class="hide" value="Hide Slider" />
 <br /><br />
 <ul class="bxslider">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>