2012-01-03 214 views
4

我正在使用bxslider插件,并为上一个和下一个函数创建了一些外部控件,尽管我似乎无法弄清楚如何对启动/停止控件执行相同的操作。bx滑块启动/停止功能

基本上我想用这个作为滑块的播放/暂停功能。

有没有人有任何使用此插件的经验?

这里是我到目前为止,没有启动/停止功能的工作:

http://jsfiddle.net/WaWLN/1/

另外,我想滑块为“自动”戏,以及具有这种外部控制。我只注意到,点击我的任何链接似乎禁用自动播放,我必须刷新页面才能恢复。

回答

4

我不知道,如果你还需要一个答案,但如果你更新你的代码这一点,它应该工作:

var slider = $('#bxslider').bxSlider({ 

    auto: true, 

    controls: false 

}); 

$('#go-prev').click(function(){ 

    slider.goToPreviousSlide(); 

    slider.startShow(); //added this line 

    return false; 
}); 

    $('#go-next').click(function(){ 

    slider.goToNextSlide(); 

    slider.startShow(); //added this line 

    return false; 

    }); 

    $('#my-start-stop').click(function(){ 

     /* added a class to your #my-start-start a tag called "stopShow", note: would recommend that you also change the text to say "Stop" when the show is active and "Start" when the show is not. :) */ 

     if($('#my-start-stop').attr('class') == 'stopShow'){ 

      slider.stopShow(); 

      $('#my-start-stop').removeClass('stopShow'); 

     } else { 

      slider.startShow(); 

      $('#my-start-stop').addClass('stopShow'); 


     } 


    return false; 
    }); 
+3

值得补充的是stopShow()和startShow()不存在于最新版本的BXSlider上。你应该使用'stopAuto()'和'startAuto()' – Chris 2014-07-31 14:53:14