javascript - 如何启动/停止 ResponsiveSlides.js？

Question

我在响应式滑块上测试一些新东西，但在使用这个插件时我被困在了一些东西上：http ://responsiveslides.com/

谁能帮助我如何为滑块创建启动/停止功能？我想要一个开始/停止选项，以控制滑块是在幻灯片之间自动切换还是暂停，从而为用户提供更多控制权。

滑块中唯一可用的选项是悬停时开始/停止。当我单击 DOM 中的自定义元素时，我需要它来启动/停止。

Answer 1

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

首先，创建一个名为 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 元素来完成他的工作。forcePause 避免在鼠标悬停后重新启动滑块。

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

你可以看到它在这里工作：http: //jsbin.com/eHaHEVuN/1/

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

Answer 2

使用参数控制启动/停止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
    });

Answer 3

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

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>

Answer 4

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

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

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;
    });    
});