如何启动/停止响应式幻灯片.js

您需要向插件添加一些代码。

首先，创建一个名为 forcePause 的变量：

    fadeTime = parseFloat(settings.speed),
    waitTime = parseFloat(settings.timeout),
    maxw = parseFloat(settings.maxwidth),
    forcePause = false, // <---- here!

在 restartCycle 方法中，您需要检查暂停是否被强制：

   restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearInterval(rotate);
        if ( !forcePause ) // new line
          // Restart
          startCycle();
      }
    };

之后，您可以在第 300 行中添加类似的东西：

    $( '.pause_slider' ).click( function( e ){
      e.preventDefault();
      forcePause = true;
      $( this ).hide()
      $( '.play_slider' ).show();
      clearInterval(rotate);
    });
    $( '.play_slider' ).click( function( e ) {
      e.preventDefault();
      forcePause = false;
      $( this ).hide();
      $( '.pause_slider' ).show();
      restartCycle();
    });

每个类需要两个 HTML 元素来完成他的工作。这 强制暂停 避免 重新启动 de 滑块 悬停后。

我知道这不是有史以来最好的解决方案，但它确实可以解决问题。

您可以在此处看到它的工作原理：http://jsbin.com/eHaHEVuN/1/

您还将找到代码。 :)我希望这对你有用。

使用pause参数控制启动/停止：

$(".rslides").responsiveSlides({
      auto: true,             // Boolean: Animate automatically, true or false
      speed: 500,            // Integer: Speed of the transition, in milliseconds
      timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
      pager: false,           // Boolean: Show pager, true or false
      nav: false,             // Boolean: Show navigation, true or false
      random: false,          // Boolean: Randomize the order of the slides, true or false
      pause: true,           // Boolean: Pause on hover, true or false
      pauseControls: true,    // Boolean: Pause when hovering controls, true or false
      prevText: "Previous",   // String: Text for the "previous" button
      nextText: "Next",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",     // Selector: Declare custom pager navigation
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){},   // Function: Before callback
      after: function(){}     // Function: After callback
    });

还有另一个简单的解决方案 - 在悬停时启用暂停，然后模拟悬停：

.JS：

$(".rslides").responsiveSlides({
  pause: true
});
$('.carousel-pause .pause').click(function(e){
  $(this).hide();
  $('.play').show();
  $('.rslides').trigger('mouseenter');
});
$('.carousel-pause .play').click(function(e){
  $(this).hide();
  $('.pause').show();
  $('.rslides').trigger('mouseleave');
});

.HTML：

<div class="carousel-pause">
  <span class="pause">Pause</span>
  <span class="play">Play</span>
</div>

根据@miduga的答案构建，以获得量身定制的解决方案，以允许外部事件暂停幻灯片放映。

我最终创建了一个全局变量 window.responsive SlidesForcePause，用于旋转间隔以确定是否应该进行旋转。理想情况下，应该有一个公共方法来暂停单个幻灯片，但这是一个快速技巧，将暂停页面上的任何幻灯片。我的情况只需要在生命周期很短的页面上显示一个幻灯片。

http://jsfiddle.net/egeis/wt6ycgL0/

初始化全局变量：

return this.each(function () {
    // Index for namespacing
    i++;
    window.responsiveSlidesForcePause = false; // new global variable
    var $this = $(this),

使用全局变量：

startCycle = function () {
    rotate = setInterval(function () {
        if (!window.responsiveSlidesForcePause) { // new if statement
            // Clear the event queue
            $slide.stop(true, true);
            var idx = index + 1 < length ? index + 1 : 0;
            // Remove active state and set new if pager is set
            if (settings.pager || settings.manualControls) {
                selectTab(idx);
            }
            slideTo(idx);
        }
    }, waitTime);
};

这允许暂停幻灯片的事件位于实际插件之外。

$(document).ready(function() {
    $( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
    $( ".pause_slider" ).on("click", function (e) {
        e.preventDefault();
        $(this).hide();
        $( '.play_slider' ).show();
        window.responsiveSlidesForcePause = true;
    });
    $( '.play_slider' ).click( function(e) {
        e.preventDefault();
        $( this ).hide();
        $( '.pause_slider' ).show();
        window.responsiveSlidesForcePause = false;
    });    
});