1

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

bxslider 正在为每个幻灯片创建播放/暂停，但我想要某种方式让一个按钮暂停当前页面上的所有幻灯片。这是因为幻灯片是相互关联的，并且必须保持：

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

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

.bxslider 和 .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>
4

1 回答 1

5

尝试

 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/

于 2013-11-11T17:42:55.507 回答