在 Nivo 滑块上播放/暂停按钮答案

【问题标题】：Play/Pause Btn on Nivo Slider在 Nivo 滑块上播放/暂停按钮
【发布时间】：2012-08-27 11:53:31
【问题描述】：

有谁知道是否可以将播放/暂停按钮添加到 Nivo 滑块？

非常感谢，

【问题讨论】：

标签： jquery jquery-plugins slider nivo-slider

【解决方案1】：

将下面的代码添加到您的 jquery 就绪函数中。该代码添加了两个按钮用于启动和停止。此代码的优点是您不必修改 nivoslider.js。 ;-)

var slider = jQuery('#slider');
var nivoStartStopControl = jQuery('<div class="nivo-startstopNav"></div>');

slider.after(nivoStartStopControl);
nivoStartStopControl.append('<a href="#" id="nivoStart"><span>START</span></a> <a href="#" id="nivoStop"><span>STOP</span></a>');

jQuery('#nivoStop').click( function(event) {
   event.preventDefault();
   slider.data('nivoslider').stop();
});

jQuery('#nivoStart').click( function(event) {
   event.preventDefault();
   slider.data('nivoslider').start();
});

【讨论】：

【解决方案2】：

只需在 nquery.nivo.slider.js 的第 627 行添加此代码

jQuery('#pause').click(function(){
    if(!$(element).data('nivo:vars').stop){
        $(element).data('nivo:vars').stop = true;
        trace('Stop Slider');
    } });

jQuery('#play').click(function(){
    if($(element).data('nivo:vars').stop){
                     $(element).data('nivo:vars').stop = false;
                     trace('Start Slider');
                } });

发件人：http://support.dev7studios.com/discussions/nivo-slider/1949-how-to-add-play-and-pause-button-on-the-image-slider

【讨论】：

【解决方案3】：

首先，在您的页面中插入 2 个按钮，将它们堆叠在同一位置，并为它们分配 ID 暂停和播放。

然后，将这些代码行添加到页面的<head> 部分。

<script type="text/javascript">
$(window).load(function() {
    $("#Pause").click(function () { 
       $('#Pause').fadeOut(200); 
       $('#Play').fadeIn(200); 
       $('#Slider').data('nivoslider').stop();
      });
    $("#Play").click(function () {
        $('#Play').fadeOut(200);
        $('#Pause').fadeIn(200);
        $('#Slider').data('nivoslider').start();
      });
});</script>

【讨论】：

如何在滑块中添加这些按钮？
You can see full coding here