0

我在使用 bxSlider 插件时遇到了一个愚蠢的问题。我的滑块仅显示 4 张具有自动滑动模式的幻灯片。但是当有人点击一个特定的导航链接时，我会附加另一张与该链接相关的幻灯片。但是当有人单击上一个/下一个控件并重新加载带有 4 张幻灯片的默认滑块时，我想删除该新幻灯片。但它不适用于上一个/下一个控件。

这是代码： 

//Default Slider
var slider= $('.bxslider').bxSlider({
    displaySlideQty : 4,
    moveSlideQty : 4,
    maxSlides: 4,
    auto: true,
    autoStart: true,
    preloadImages: 'visible',
    mode: 'fade',
    pager: false,
});

//If someone clicks any link on navigation
$('#how').click(function(e){
  e.preventDefault();

  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
  }
  $('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
  slider.reloadSlider({
    mode:'fade',
    auto: false,
    autoStart: false,
    pager:false,

  });
  slider.goToSlide(4);

});

当#How 标签的幻灯片是当前幻灯片时，如果我想单击任何下一个/上一个控件，我想删除幻灯片 'li.added' 并重新加载带有 4 张幻灯片的默认滑块。那就是我尝试了以下代码

$('a.bx-next').click(function(e){
  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
    slider.reloadSlider({
    mode:'fade',
    auto: true,
    autoStart: true,
    pager:false,

  });
  }
});

但什么也没发生！谁能帮我解决这个问题？我做错了什么？这是为您提供方便的实时测试站点。

4

1 回答 1

1

我发现每次调用 reloadSlider 时都需要绑定下一个按钮单击功能，因为它会重新绑定下一个上一个控件，因此如果您在页面加载时执行此操作，它将丢失事件绑定。所以请在每次重新加载时重新绑定点击事件。

var bindNext = function(){

 $('a.bx-next').click(function(e){
  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
    slider.reloadSlider({
    mode:'fade',
    auto: true,
    autoStart: true,
    pager:false,

  });
  }
});

}

然后当您调用 reloadSlider 时，在调用它之后调用 bindNext() 函数。

 $('#forSellers').click(function(e){
  e.preventDefault();

  if( $('ul.bxslider li.added').length > 0 ){
    $('.bxslider').find('li.added').remove();
  }

  $('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
  slider.reloadSlider({

    auto: false,
    autoStart: false,
    pager:false,

    mode:'fade',
  });
  slider.goToSlide(4);

  bindNext();

});

它在我身边工作。

于 2013-03-10T13:26:22.257 回答