bxSlider jQuery插件問題

Question

我在一個網站上工作，並在其中實現了bxSlider。 我有一個頁面，其中有很多圖像（它們的類名為.item ）。 當您單擊其中一張圖像時，將顯示一個疊加窗口並顯示內容（帶有幾段），然后是一個簡單的方法。

問題是我在document.ready之后立即調用bxSlider，並且由於我的覆蓋窗口是隱藏的（ display:none ），因此bxSlider無法正確加載。

所以我決定放$('.bxSlider').bxSlider(); 在$('.item').click(); 而且效果很好。

但是當Im關閉覆蓋窗口，然后通過單擊.item再次顯示它時，它將嘗試再次調用bxSlider函數，這將導致問題。

我試圖調用$('.bxSlider').destroySlide(); 在.close （關閉覆蓋窗口的div）下，但是它不起作用。

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/

UPDATE

我粘貼的代碼是下面這段代碼的一部分，您需要使用與此相等的代碼，好嗎？

$(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

代碼的問題是您沒有保存bxslider句柄。 第二個問題是您調用的是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>