在 Nivo 滑块上播放/暂停按钮
Posted
技术标签:
【中文标题】在 Nivo 滑块上播放/暂停按钮【英文标题】：Play/Pause Btn on Nivo Slider 【发布时间】：2012-08-27 11:53:31 【问题描述】：有谁知道是否可以将播放/暂停按钮添加到 Nivo 滑块？
非常感谢，
【问题讨论】：
【参考方案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以上是关于在 Nivo 滑块上播放/暂停按钮的主要内容，如果未能解决你的问题，请参考以下文章