Question

我在页面上有两个滑块。使用相同的时间和设置调用。一个滑块是图像滑块，另一个是它的标题。两者都在html的截然不同的领域。

bxslider正在为每个幻灯片创建一个播放/暂停，但我想要一些方法让一个按钮暂停当前页面上的所有幻灯片。这是因为幻灯片是相对于彼此的，必须保持：

滑块A - 滑块1 /滑块B - 滑块1
滑块A - 滑动2 /滑块B - 滑动2
滑块A - 滑动3 /滑块B - 滑动3
等

现在，当我暂停一个幻灯片放映时，另一个继续，当按下播放时，它们不再同步。

.bxslider＆amp; .bxslider-content都是我的bxslider类。

谢谢！

<script type="text/javascript">
    $(document).ready(function () {
           $('.bxslider, .bxslider-content').bxSlider({
                mode: 'fade',  
                auto: true,
                ease: 'cubic-bezier(0.42,0,0.58,1)',
                pager: false,
                controls: false,
                autoControlsCombine: true,
                autoControls: true,
                pause: 8000,
                speed: 800
           });

    });
    </script>

Answer 1

尝试

 var slider=$('.bxslider').bxSlider({
               //code here
           });

 var slider1=$('.bxslider-content').bxSlider({
               //code here
           });


 $(document).on('click','.pause',function(){         
        slider.stopAuto();
        slider1.stopAuto();

    });

   $(document).on('click','.play',function(){         
        slider.startAuto();
        slider1.startAuto();

    });

小提琴http://jsfiddle.net/CDvmk/

bxSlider - 播放/暂停页面上的所有滑块

1 个答案: