Question

有没有人知道是否有办法将播放/暂停按钮添加到Nivo滑块？

非常感谢，

Answer 1

将以下代码添加到jquery ready函数中。该代码添加了两个用于启动和停止的按钮。此代码的优点是您不必修改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();
});

Answer 2

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

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

Answer 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>

在Nivo滑块上播放/暂停Btn

3 个答案: