Question

在我的网页上，bxSlider在页面加载时启动。我想暂停一下在某些时候，例如当用户单击“联系我们”时。然后，当“联系我们”表单关闭时，我想继续播放bxSlider。

我不确定如何以编程方式暂停和恢复bxSlider。因此，我在下面的代码中指定了“ autoHover：true”，并使用trigger（）方法来模拟mouseover或mouseout事件，从而导致bxSlider暂停或恢复。但我不希望不指定“ autoHover：true”，因为用户可能会无意中将鼠标悬停在bxSlider上并导致其暂停。

如果有人能告诉我如何暂停和恢复bxSlider，我将不胜感激。

<html>
<head>
<script>
   $(window).load(function() {
         $('.bxslider').bxSlider( {
          auto: true,
          mode: 'fade',
          autoHover: true,
          pause: 1000
         });
    });

    function pausebx() { 
       $('.bxslider').trigger('mouseover'); 
    }
    function resumebx() { 
       $('.bxslider').trigger('mouseout'); 
    }

</script>
</head>
<body>
<div>
<button id="btnOpenContactForm" onclick="pausebx()">Open Contact Form</button><br>
<button id="btnCloseContactForm" onclick="resumebx()">Close Contact Form</button><br>
</div>

<div>
    <ul class="bxslider">
        <li><img src="http://www.example.com/images/S-1.gif"></li>
        <li><img src="http://www.example.com/images/S-2.gif"></li>
        <li><img src="http://www.example.com/images/S-3.gif"></li>
    </ul>
</div>
</body>
</html>

Answer 1

为此尝试使用Public Methods stopAuto和startAuto

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

// pause
$(document).on('click','#btnOpenContactForm',function(){         
     slider.stopAuto();
});

// play
$(document).on('click','#btnCloseContactForm',function(){         
     slider.startAuto();    
});

如何暂停和恢复bxSlider

1 个答案: